[
  {
    "path": ".circleci/config.yml",
    "content": "version: 2\njobs:\n  test:\n    docker:\n      - image: circleci/node:14.15.0\n\n    working_directory: ~/repo\n\n    steps:\n      - checkout\n\n      - restore_cache:\n          keys:\n            - v2-dependencies-{{ checksum \"package.json\" }}\n            - v2-dependencies-\n\n      - run: yarn\n\n      - save_cache:\n          paths:\n            - node_modules\n          key: v2-dependencies-{{ checksum \"package.json\" }}\n\n      - run: yarn run lint\n      - run: yarn test -w 1 --coverage\n      - run: bash <(curl -s https://codecov.io/bash)\n\n  build:\n    docker:\n      - image: circleci/node:14.15.0\n\n    working_directory: ~/repo\n\n    steps:\n      - checkout\n\n      - restore_cache:\n          keys:\n            - v2-dependencies-{{ checksum \"package.json\" }}\n            - v2-dependencies-\n\n      - run: yarn\n\n      - save_cache:\n          paths:\n            - node_modules\n          key: v2-dependencies-{{ checksum \"package.json\" }}\n\n      - run: yarn run build\nworkflows:\n  version: 2\n  build_and_test:\n    jobs:\n      - test\n      - build\n"
  },
  {
    "path": ".codecov.yml",
    "content": "codecov:\n  require_ci_to_pass: yes\n  comment:\n    layout: \"reach, diff, flags, files\"\n    behavior: default\n    require_changes: false\n    branches:\n      - \"master\"\n"
  },
  {
    "path": ".eslintignore",
    "content": ".now/*\n.next/*\nexamples/*\ndist/*\nesm/*\npublic/*\nscripts/*\ntests/*\n*.config.js\n"
  },
  {
    "path": ".eslintrc.js",
    "content": "module.exports = {\n  parser: '@typescript-eslint/parser',\n  extends: ['eslint-config-ts-lambdas', 'eslint-config-ts-lambdas/react', 'prettier'],\n  plugins: ['@typescript-eslint'],\n  settings: {\n    react: {\n      pragma: 'React',\n      version: 'detect',\n    },\n  },\n  parserOptions: {\n    project: './tsconfig.json',\n    ecmaFeatures: {\n      jsx: true,\n    },\n  },\n  rules: {\n    indent: 0,\n    '@typescript-eslint/indent': 0,\n    '@typescript-eslint/member-delimiter-style': 0,\n  },\n}\n"
  },
  {
    "path": ".github/CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n  and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n  overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n  advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n  address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nunix.bio@gmail.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior,  harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n"
  },
  {
    "path": ".github/CONTRIBUTING.md",
    "content": "##  Geist UI - React Contributing Guide\n\n### Ready to start\n\nWe welcome everyone to join in the construction of the project.\nAs a pre requirement, you need to have a preliminary understanding of React,\nthis is a good [learning document for React](https://reactjs.org/docs/getting-started.html).\nFor basic operation of Git, you can refer to [GitHub's help documentation](https://help.github.com/en/github/using-git).\n\n1. [Fork this repository](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) to your own account and then clone it.\n2. Create a new branch for your changes: `git checkout -b {BRANCH_NAME}`.\n3. Install [Yarn](https://classic.yarnpkg.com/en/docs/install#mac-stable) and then update project dependenices: `yarn`.\n4. Run `yarn dev` and view your changes on your local document site. (If you add a new document page, you need to run `yarn dev` again)\n\nAt any time, you think it's ok, you can start the following steps to submit your amazing works:\n\n1. Run `yarn lint` check the code style.\n2. Run `yarn test:update` to update & run your testcase.\n3. Run `git commit -ma '{YOUR_MESSAGE}'` to commit changes. Commit info should be formatted by the [rules](https://github.com/conventional-changelog/commitlint/blob/master/%40commitlint/config-conventional/README.md).\n4. Push code to your own repo and [create PullRequest](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests) at GitHub.\n\n### Common steps\n\n#### **Create component**\n\n1. Create a folder in `components`, and add `import` to `components/index.ts`.\n2. Create a document file in `pages/en-us/components/`.\n3. Restart local server view changes: `yarn dev`.\n\n#### **About document page**\n\n1. Document page must have `meta` field. refer to [here](https://github.com/geist-org/geist-ui/blame/master/pages/en-us/components/avatar.mdx#L4).\n2. If you are creating a new component, please provide at least one document.\n3. Do Document using [mdx-js](https://github.com/mdx-js/mdx), here is [vs-code plug-in](https://github.com/silvenon/vscode-mdx).\n\n#### **Create testcase**\n\n1. If you are creating a new component, the testcase is required.\n2. If you only modify components, please note update **test snapshot**: `yarn test-update`.\n3. (Optional) Modifying `testRegex` in `.jest.config.js` allows you to test only a single component.\n4. Please check coverage locally before submit.\n\n### Q & A\n\n> How to choose the target branch of PR ?\n\n- If this is a `feature`, set to `rc` branch. All the others are set to `master` branch.\n\n> How to check my code style?\n\n- Run `yarn prettier`\n\n> I added a new document page, but it was not displayed locally ?\n\n- Run `yarn dev` again.\n\n> How can I update remote origin ?\n\n- refer to [here](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes).\n\n\n### Get stuck\n\n- Create new issue to tell us: [create issue](https://github.com/geist-org/geist-ui/issues/new/choose).\n- Ask on [GitHub Discussions](https://github.com/geist-org/geist-ui/discussions).\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/1-bug-report.md",
    "content": "---\nname: \"Bug report 🐞\"\nabout: \"If something isn't working as expected 🤔.\"\n---\n\n<!-- Please do NOT DELETE the template. -->\n<!-- No template issues will be closed. -->\n\n# Bug report 🐞\n\n## Version & Environment\n\n  - Version of browser\n  - Version of `geist-ui/core`\n\n## Expected Behaviour\n\nThe behavior I expect is ...\n\n## Actual results (or Errors)\n\nI got an error:\n\n```\ncode\n```\n\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/2-feature-request.md",
    "content": "---\nname: \"Feature request 🚀\"\nabout: \"I have a suggestion!\"\n---\n\n<!-- Please do NOT DELETE the template. -->\n<!-- No template issues will be closed. -->\n\n# Feature request 🚀\n\n  - [ ] I will create Pull Request\n  - [x] It's just a suggestion\n\n### Expected\n\n  - Component or something else\n\n### Examples\n\n```jsx\n```\n\n### Programme (Optional)\n\n### Others (Optional)\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/3-docs.md",
    "content": "---\nname: \"About `docs` 🛠️\"\nabout: \"Issues and feature requests for docs\"\n---\n\n<!-- Please do NOT DELETE the template. -->\n<!-- No template issues will be closed. -->\n\n# About `docs`\n\nThis is a document site related issue.\n\n### Languages\n\n  - [x] English\n  - [ ] Chinese\n\n### Description\n\n\n### Page Links (Optional)\n\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/config.yml",
    "content": "contact_links:\n  - name: Help or Questions 🙀\n    url: https://github.com/geist-org/geist-ui/discussions\n    about: This issue tracker is not for support questions. Please refer to the Github's Discussions.\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "## Checklist\n\n- [ ] Fix linting errors\n- [ ] Tests have been added / updated (or snapshots)\n\n## Change information\n\n"
  },
  {
    "path": ".github/workflows/publish.yml",
    "content": "name: Publish\n\non:\n  release:\n    types: [created]\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v1\n      - name: checkout\n        uses: actions/setup-node@v1\n        with:\n          node-version: 12\n      - name: install\n        run: yarn install --check-files --frozen-lockfile\n      - name: lint\n        run: yarn lint\n      - name: lint\n        run: yarn test\n      - name: build\n        run: yarn build\n  publish:\n    needs: build\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v1\n      - name: checkout\n        uses: actions/setup-node@v1\n        with:\n          node-version: 12\n          registry-url: https://registry.npmjs.org/\n      - name: install\n        run: yarn install --check-files --frozen-lockfile\n      - name: set dist-tag\n        run: |\n          case \"${{github.event.release.name}}\" in\n          *\"rc\"* | *\"canary\"*)\n           echo \"r_tag=canary\" >> $GITHUB_ENV;;\n          *\"dev\"*)\n           echo \"r_tag=dev\" >> $GITHUB_ENV;;\n          *\"beta\"*)\n           echo \"r_tag=beta\" >> $GITHUB_ENV;;\n          *)\n           echo \"r_tag=latest\" >> $GITHUB_ENV;;\n          esac\n      - name: publish\n        run: |\n          echo \">> dist-tag: ${{ env.r_tag }}\"\n          yarn release --tag ${{ env.r_tag }}\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.npm_token}}\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n.env*\n.idea\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n.now\ndist\nesm\nexamples/**/yarn.lock\nexamples/**/out\nexamples/**/.next\nexamples/**/node_modules\nexamples/**/_build\nexamples/**/.cache\n\n# Local Netlify folder\n.netlify\n"
  },
  {
    "path": ".jest.config.js",
    "content": "module.exports = {\n  verbose: true,\n\n  testEnvironment: 'jsdom',\n\n  setupFilesAfterEnv: ['./tests/setup.ts'],\n\n  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],\n\n  testPathIgnorePatterns: ['/pages/', '/dist/', '/lib/', '/esm/'],\n\n  transform: {\n    '^.+\\\\.tsx?$': ['babel-jest', { configFile: './tests/.babelrc.js' }],\n  },\n\n  testRegex: '.*\\\\.test\\\\.(j|t)sx?$',\n  // testRegex: 'use-classes\\\\/.*\\\\.test\\\\.(j|t)sx?$',\n\n  collectCoverageFrom: [\n    'components/**/*.{ts,tsx}',\n    '!components/**/styles.{ts,tsx}',\n    '!components/**/*types.{ts,tsx}',\n    '!components/use-theme/*',\n    '!components/use-all-themes/*',\n    '!components/themes/*',\n    '!components/geist-provider/*',\n    '!components/index.ts',\n    '!components/utils/**/*',\n  ],\n\n  moduleNameMapper: {\n    'tests/(.*)$': '<rootDir>/tests/$1',\n    components: '<rootDir>/components/index.ts',\n  },\n}\n"
  },
  {
    "path": ".prettierignore",
    "content": ".github\n.next\n.now\n.circleci\ndist\ncoverage\npublic\nesm\n*.json\n*.d.ts\n*.yml\n*.snap\n"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\n\nnode_js:\n  - 13.9.0\n\ncache:\n  directories:\n  - \"node_modules\"\n\nnotifications:\n  email:\n    on_success: never\n\nbranches:\n  only:\n    - master\n\ninstall:\n  - yarn\n\nscript:\n  - yarn run build\n"
  },
  {
    "path": ".vercelignore",
    "content": ".hg\n.git\n.gitmodules\n.svn\n.cache\n.next\n.now\n.vercel\n.npmignore\n.dockerignore\n.gitignore\n.*.swp\n.DS_Store\n.wafpicke-*\n.lock-wscript\n.env.local\n.env.*.local\n.venv\nnpm-debug.log\nconfig.gypi\nnode_modules\n__pycache__\nvenv\nCVS\nexamples\nesm\ndist\ncoverage\n.circleci\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Geist UI\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<p align=\"center\" height=\"370\">\n<img align=\"center\" height=\"370\" src=\"https://user-images.githubusercontent.com/11304944/91128466-dfc96c00-e6da-11ea-8b03-a96e6b98667d.png\">\n</p>\n\n<p align=\"center\">\n<img alt=\"Codecov\" src=\"https://img.shields.io/codecov/c/github/geist-org/geist-ui?style=for-the-badge&labelColor=000000\">\n<img alt=\"CircleCI\" src=\"https://img.shields.io/circleci/build/github/geist-org/geist-ui?style=for-the-badge&labelColor=000000\">\n<img alt=\"npm (scoped)\" src=\"https://img.shields.io/npm/v/@geist-ui/core?style=for-the-badge&labelColor=000000\">\n</p>\n\n> Modern and minimalist React UI library, originating from Vercel's design.\n\n> **NOTE: This is a COMMUNITY PROJECT, [not associated with Vercel](https://github.com/geist-org/geist-ui/issues/635).**\n\n<br/>\n\n## Quick Start\n\n1. run `yarn add @geist-ui/core` or `npm i @geist-ui/core` install it.\n\n2. import into project:\n\n```jsx\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\n\nconst Application = () => (\n  <GeistProvider>\n    <CssBaseline /> // ---> Normalize styles\n    <AppComponent /> // ---> Your App Component\n  </GeistProvider>\n)\n```\n\n## Documentation\n\n- [Document Site](https://geist-ui.dev)\n- [中文文档](https://geist-ui.dev/zh-cn)\n\n## Development\n\n- [Contributing Guide](https://github.com/geist-org/geist-ui/blob/master/.github/CONTRIBUTING.md)\n\n## Showcases\n\n- [Secret](https://secret.gl/)\n- [Article view count](https://views-docs.unix.bio/)\n- [Tree viewer for CDN](https://cdn.unix.bio/)\n- [Better social image](https://img.unix.bio/)\n- [SentiNEO: Near-Earth Objects Viewer](https://sentineo.app)\n- [Dashboard Design](https://github.com/ofekashery/react-dashboard-design)\n- [Regex-Vis: Regex visualizer & editor](https://github.com/Bowen7/regex-vis)\n- [Add here](https://github.com/geist-org/geist-ui/issues/new)\n\n## LICENSE\n\n[MIT](./LICENSE)\n"
  },
  {
    "path": "components/auto-complete/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`AutoComplete should render correctly 1`] = `<ScaleGeistAutoComplete />`;\n"
  },
  {
    "path": "components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`AutoComplete Search should hide empty component 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"auto-complete\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"with-label\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"input-container\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"input-wrapper\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"autocomplete\": \"off\",\n                      \"class\": \"\",\n                      \"placeholder\": \"Enter here\",\n                      \"type\": \"text\",\n                      \"value\": \"\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"input\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"autocomplete\": undefined,\n                      \"class\": undefined,\n                      \"placeholder\": undefined,\n                      \"type\": undefined,\n                      \"value\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"autocomplete\": undefined,\n                      \"class\": undefined,\n                      \"placeholder\": undefined,\n                      \"type\": undefined,\n                      \"value\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"input-container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"input-wrapper\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"autocomplete\": \"off\",\n                        \"class\": \"\",\n                        \"placeholder\": \"Enter here\",\n                        \"type\": \"text\",\n                        \"value\": \"\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"input\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n            .auto-complete {\n              width: max-content;\n              height: auto;\n              padding: 0 0 0 0;\n              margin: 0 0 0 0;\n            }\n\n            .auto-complete :global(.loading) {\n              width: max-content;\n            }\n          \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n            .auto-complete {\n              width: max-content;\n              height: auto;\n              padding: 0 0 0 0;\n              margin: 0 0 0 0;\n            }\n\n            .auto-complete :global(.loading) {\n              width: max-content;\n            }\n          \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"with-label\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"input-container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"input-wrapper\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"autocomplete\": \"off\",\n                        \"class\": \"\",\n                        \"placeholder\": \"Enter here\",\n                        \"type\": \"text\",\n                        \"value\": \"\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"input\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"input-container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"input-wrapper\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"autocomplete\": \"off\",\n                          \"class\": \"\",\n                          \"placeholder\": \"Enter here\",\n                          \"type\": \"text\",\n                          \"value\": \"\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"input\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"autocomplete\": undefined,\n                          \"class\": undefined,\n                          \"placeholder\": undefined,\n                          \"type\": undefined,\n                          \"value\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"autocomplete\": undefined,\n                          \"class\": undefined,\n                          \"placeholder\": undefined,\n                          \"type\": undefined,\n                          \"value\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`AutoComplete Search should hide empty component 2`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"auto-complete\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"with-label\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"input-container\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"input-wrapper\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"autocomplete\": \"off\",\n                      \"class\": \"\",\n                      \"placeholder\": \"Enter here\",\n                      \"type\": \"text\",\n                      \"value\": \"\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"input\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"autocomplete\": undefined,\n                      \"class\": undefined,\n                      \"placeholder\": undefined,\n                      \"type\": undefined,\n                      \"value\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"autocomplete\": undefined,\n                      \"class\": undefined,\n                      \"placeholder\": undefined,\n                      \"type\": undefined,\n                      \"value\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"input-container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"input-wrapper\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"autocomplete\": \"off\",\n                        \"class\": \"\",\n                        \"placeholder\": \"Enter here\",\n                        \"type\": \"text\",\n                        \"value\": \"\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"input\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n            .auto-complete {\n              width: max-content;\n              height: auto;\n              padding: 0 0 0 0;\n              margin: 0 0 0 0;\n            }\n\n            .auto-complete :global(.loading) {\n              width: max-content;\n            }\n          \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n            .auto-complete {\n              width: max-content;\n              height: auto;\n              padding: 0 0 0 0;\n              margin: 0 0 0 0;\n            }\n\n            .auto-complete :global(.loading) {\n              width: max-content;\n            }\n          \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"with-label\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"input-container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"input-wrapper\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"autocomplete\": \"off\",\n                        \"class\": \"\",\n                        \"placeholder\": \"Enter here\",\n                        \"type\": \"text\",\n                        \"value\": \"\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"input\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"autocomplete\": undefined,\n                        \"class\": undefined,\n                        \"placeholder\": undefined,\n                        \"type\": undefined,\n                        \"value\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"input-container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"input-wrapper\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"autocomplete\": \"off\",\n                          \"class\": \"\",\n                          \"placeholder\": \"Enter here\",\n                          \"type\": \"text\",\n                          \"value\": \"\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"input\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"autocomplete\": undefined,\n                          \"class\": undefined,\n                          \"placeholder\": undefined,\n                          \"type\": undefined,\n                          \"value\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"autocomplete\": undefined,\n                          \"class\": undefined,\n                          \"placeholder\": undefined,\n                          \"type\": undefined,\n                          \"value\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/auto-complete/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { AutoComplete } from 'components'\nimport { nativeEvent } from 'tests/utils'\nimport { act } from 'react-dom/test-utils'\n\ndescribe('AutoComplete', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<AutoComplete />)\n    expect(() => wrapper.unmount()).not.toThrow()\n    expect(<AutoComplete />).toMatchSnapshot()\n  })\n\n  it('should support sizes and status', () => {\n    const wrapper = mount(\n      <div>\n        <AutoComplete type=\"secondary\" />\n        <AutoComplete type=\"success\" />\n        <AutoComplete />\n        <AutoComplete />\n      </div>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should set input value from initial value', () => {\n    let wrapper = mount(<AutoComplete initialValue=\"value\" />)\n    let input = wrapper.find('input').at(0).getDOMNode()\n    expect((input as HTMLInputElement).value).toEqual('value')\n\n    wrapper = mount(<AutoComplete value=\"value2\" />)\n    input = wrapper.find('input').at(0).getDOMNode()\n    expect((input as HTMLInputElement).value).toEqual('value2')\n  })\n\n  it('should render clear icon', async () => {\n    const wrapper = mount(<AutoComplete initialValue=\"value\" />)\n    expect(wrapper.find('svg').length).toBe(0)\n\n    await act(async () => {\n      wrapper.setProps({ clearable: true })\n    })\n    expect(wrapper.find('svg').length).toBe(1)\n\n    wrapper.find('svg').simulate('click', nativeEvent)\n    const input = wrapper.find('input').at(0).getDOMNode()\n    expect((input as HTMLInputElement).value).toEqual('')\n  })\n\n  it('should reponse width change', async () => {\n    const wrapper = mount(<AutoComplete initialValue=\"value\" width=\"100px\" />)\n    expect(wrapper.prop('width')).toEqual('100px')\n    await act(async () => {\n      wrapper.setProps({ width: '200px' })\n    })\n\n    expect(wrapper.prop('width')).toEqual('200px')\n  })\n\n  it('should forward ref by default', () => {\n    const ref = React.createRef<HTMLInputElement>()\n    const wrapper = mount(<AutoComplete ref={ref} />)\n    expect(ref.current).not.toBeNull()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/auto-complete/__tests__/search.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { AutoComplete } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport { act } from 'react-dom/test-utils'\nconst mockOptions = [{ label: 'London', value: 'london' }]\n\ndescribe('AutoComplete Search', () => {\n  it('should render options element', () => {\n    const wrapper = mount(<AutoComplete options={mockOptions} />)\n    wrapper.find('input').at(0).simulate('focus')\n    let dropdown = wrapper.find('.auto-complete-dropdown').children()\n    expect(dropdown.length).not.toBe(0)\n\n    wrapper.find('input').at(0).simulate('blur')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should update value when dropdown clicked', () => {\n    let value = ''\n    const wrapper = mount(\n      <AutoComplete options={mockOptions} onChange={val => (value = val)} />,\n    )\n    wrapper.find('input').at(0).simulate('focus')\n    wrapper.find('.item').at(0).simulate('click', nativeEvent)\n    expect(value).toEqual('london')\n  })\n\n  it('should ignore events when disabled', () => {\n    let value = ''\n    const wrapper = mount(\n      <AutoComplete disabled options={mockOptions} onChange={val => (value = val)} />,\n    )\n    wrapper.find('input').at(0).simulate('focus')\n    wrapper.find('.item').at(0).simulate('click', nativeEvent)\n    expect(value).not.toEqual('london')\n  })\n\n  it('should render searching component', async () => {\n    let wrapper = mount(<AutoComplete searching={false} options={mockOptions} />)\n    await act(async () => {\n      wrapper.setProps({ searching: true })\n    })\n    wrapper.find('input').at(0).simulate('focus')\n    let dropdown = wrapper.find('.auto-complete-dropdown')\n    expect(dropdown.text()).not.toContain('london')\n\n    const loading = wrapper.find('.loading')\n    expect(loading.length).not.toBe(0)\n\n    wrapper = mount(\n      <AutoComplete searching options={mockOptions}>\n        <AutoComplete.Searching>\n          <span>waiting...</span>\n        </AutoComplete.Searching>\n      </AutoComplete>,\n    )\n    wrapper.find('input').at(0).simulate('focus')\n    dropdown = wrapper.find('.auto-complete-dropdown')\n    expect(dropdown.text()).toContain('waiting')\n  })\n\n  it('should hide empty component', () => {\n    let wrapper = render(\n      <AutoComplete placeholder=\"Enter here\">\n        <AutoComplete.Empty hidden />\n      </AutoComplete>,\n    )\n    expect(wrapper).toMatchSnapshot()\n\n    wrapper = render(\n      <AutoComplete placeholder=\"Enter here\">\n        <AutoComplete.Empty>empty</AutoComplete.Empty>\n      </AutoComplete>,\n    )\n    expect(wrapper).toMatchSnapshot()\n\n    const mountWrapper = mount(\n      <AutoComplete placeholder=\"Enter here\" initialValue=\"value\">\n        <AutoComplete.Empty>empty</AutoComplete.Empty>\n      </AutoComplete>,\n    )\n    mountWrapper.find('input').at(0).simulate('focus')\n    const text = mountWrapper.find('.auto-complete-dropdown').text()\n    expect(text).toContain('empty')\n\n    const mountWrapper2 = mount(\n      <AutoComplete placeholder=\"Enter here\" initialValue=\"value\">\n        <AutoComplete.Empty hidden>empty</AutoComplete.Empty>\n      </AutoComplete>,\n    )\n    mountWrapper2.find('input').at(0).simulate('focus')\n    const text2 = mountWrapper2.find('.auto-complete-dropdown').text()\n    expect(text2).not.toContain('empty')\n  })\n\n  it('should trigger search handler', () => {\n    const handler = jest.fn()\n    const wrapper = mount(<AutoComplete initialValue=\"value\" onSearch={handler} />)\n    const input = wrapper.find('input').at(0)\n    input.simulate('focus')\n    input.simulate('change')\n    ;(input.getDOMNode() as HTMLInputElement).value = 'value'\n    expect(handler).toHaveBeenCalled()\n  })\n\n  it('should trigger select and change handler', () => {\n    const selectHandler = jest.fn()\n    const changeHandler = jest.fn()\n    const wrapper = mount(\n      <AutoComplete\n        options={mockOptions}\n        initialValue=\"value\"\n        onSelect={selectHandler}\n        onChange={changeHandler}\n      />,\n    )\n    wrapper.find('input').at(0).simulate('focus')\n    wrapper.find('.item').at(0).simulate('click', nativeEvent)\n    expect(selectHandler).toHaveBeenCalled()\n    expect(changeHandler).toHaveBeenCalled()\n  })\n\n  it('should work with custom options', () => {\n    const changeHandler = jest.fn()\n    const makeOption = (label: string, value: string): any => (\n      <AutoComplete.Option value={value}>\n        <span>{label}</span>\n      </AutoComplete.Option>\n    )\n    const options = mockOptions.map(\n      ({ label, value }) => makeOption(label, value) as typeof AutoComplete.Option,\n    )\n    const wrapper = mount(<AutoComplete options={options} onChange={changeHandler} />)\n    wrapper.find('input').at(0).simulate('focus')\n    wrapper.find('.item').at(0).simulate('click', nativeEvent)\n    expect(changeHandler).toHaveBeenCalled()\n  })\n\n  it('should work correctly without options', () => {\n    const wrapper = mount(<AutoComplete options={[]} />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('value should be reset when freeSolo disabled', async () => {\n    const wrapper = mount(<AutoComplete initialValue=\"value\" disableFreeSolo />)\n    const input = wrapper.find('input').at(0)\n    input.simulate('focus')\n    input.simulate('change', { target: { value: 'test' } })\n    expect((input.getDOMNode() as HTMLInputElement).value).toEqual('test')\n    input.simulate('blur')\n    await updateWrapper(wrapper, 200)\n    expect((input.getDOMNode() as HTMLInputElement).value).toEqual('value')\n  })\n})\n"
  },
  {
    "path": "components/auto-complete/__tests__/use-input.test.tsx",
    "content": "import React, { useEffect } from 'react'\nimport { mount } from 'enzyme'\nimport { AutoComplete, useInput } from 'components'\n\ndescribe('UseInput', () => {\n  it('should follow change with use-input', () => {\n    let log = ''\n    const logSpy = jest.spyOn(console, 'log').mockImplementation(msg => (log = msg))\n    const MockInput: React.FC<{ value?: string }> = ({ value }) => {\n      const { state, setState, bindings } = useInput('')\n      useEffect(() => {\n        if (value) setState(value)\n      }, [value])\n      useEffect(() => {\n        if (state) console.log(state)\n      }, [state])\n      return <AutoComplete {...bindings} />\n    }\n\n    const wrapper = mount(<MockInput />)\n    wrapper.setProps({ value: 'test' })\n    const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n\n    expect(input.value).toEqual('test')\n    expect(log).toContain('test')\n\n    log = ''\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', { target: { value: 'test-change' } })\n    expect(log).toContain('test-change')\n    logSpy.mockRestore()\n  })\n\n  it('should follow change with use-input', () => {\n    const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({\n      value,\n      resetValue,\n    }) => {\n      const { reset, setState, bindings } = useInput('')\n      useEffect(() => {\n        if (value) setState(value)\n      }, [value])\n      useEffect(() => {\n        if (resetValue) reset()\n      }, [resetValue])\n      return <AutoComplete {...bindings} />\n    }\n\n    const wrapper = mount(<MockInput />)\n    wrapper.setProps({ value: 'test' })\n    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.value).toEqual('test')\n\n    wrapper.setProps({ resetValue: true })\n    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.value).toEqual('')\n  })\n})\n"
  },
  {
    "path": "components/auto-complete/auto-complete-context.ts",
    "content": "import React, { MutableRefObject } from 'react'\n\nexport interface AutoCompleteConfig {\n  value?: string\n  updateValue?: (val: string) => unknown\n  visible?: boolean\n  updateVisible?: (next: boolean) => unknown\n  ref?: MutableRefObject<HTMLElement | null>\n}\n\nconst defaultContext = {\n  visible: false,\n}\n\nexport const AutoCompleteContext = React.createContext<AutoCompleteConfig>(defaultContext)\n\nexport const useAutoCompleteContext = (): AutoCompleteConfig =>\n  React.useContext<AutoCompleteConfig>(AutoCompleteContext)\n"
  },
  {
    "path": "components/auto-complete/auto-complete-dropdown.tsx",
    "content": "import React, { CSSProperties, useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { useAutoCompleteContext } from './auto-complete-context'\nimport Dropdown from '../shared/dropdown'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  visible: boolean\n  className?: string\n  disableMatchWidth?: boolean\n  dropdownStyle?: CSSProperties\n  getPopupContainer?: () => HTMLElement | null\n}\n\nconst defaultProps = {\n  className: '',\n  dropdownStyle: {},\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type AutoCompleteDropdownProps = Props & NativeAttrs\n\nconst AutoCompleteDropdown: React.FC<\n  React.PropsWithChildren<AutoCompleteDropdownProps>\n> = ({\n  children,\n  visible,\n  className,\n  dropdownStyle,\n  disableMatchWidth,\n  getPopupContainer,\n}: React.PropsWithChildren<AutoCompleteDropdownProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { ref } = useAutoCompleteContext()\n  const isEmpty = useMemo(() => {\n    return !visible || React.Children.count(children) === 0\n  }, [children, visible])\n  const classes = useClasses('auto-complete-dropdown', className)\n\n  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    event.stopPropagation()\n    event.nativeEvent.stopImmediatePropagation()\n  }\n\n  return (\n    <Dropdown\n      parent={ref}\n      visible={visible}\n      disableMatchWidth={disableMatchWidth}\n      getPopupContainer={getPopupContainer}>\n      <div className={classes} style={dropdownStyle} onClick={clickHandler}>\n        {children}\n        <style jsx>{`\n          .auto-complete-dropdown {\n            border-radius: ${theme.layout.radius};\n            box-shadow: ${isEmpty ? 'none' : theme.expressiveness.shadowLarge};\n            background-color: ${theme.palette.background};\n            overflow-y: auto;\n            max-height: 15rem;\n            overflow-anchor: none;\n          }\n        `}</style>\n      </div>\n    </Dropdown>\n  )\n}\n\nAutoCompleteDropdown.defaultProps = defaultProps\nAutoCompleteDropdown.displayName = 'GeistAutoCompleteDropdown'\nexport default AutoCompleteDropdown\n"
  },
  {
    "path": "components/auto-complete/auto-complete-empty.tsx",
    "content": "import React from 'react'\nimport AutoCompleteSearch from './auto-complete-searching'\n\ninterface Props {\n  hidden?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  hidden: false,\n  className: '',\n}\n\nexport type AutoCompleteEmptyProps = Props & React.HTMLAttributes<any>\n\nconst AutoCompleteEmpty: React.FC<React.PropsWithChildren<AutoCompleteEmptyProps>> = ({\n  children,\n  hidden,\n  className,\n}: React.PropsWithChildren<AutoCompleteEmptyProps> & typeof defaultProps) => {\n  if (hidden) return null\n  return <AutoCompleteSearch className={className}>{children}</AutoCompleteSearch>\n}\n\nAutoCompleteEmpty.defaultProps = defaultProps\nAutoCompleteEmpty.displayName = 'GeistAutoCompleteEmpty'\n\nexport default AutoCompleteEmpty\n"
  },
  {
    "path": "components/auto-complete/auto-complete-item.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { useAutoCompleteContext } from './auto-complete-context'\nimport Ellipsis from '../shared/ellipsis'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  value: string\n  // The 'isLabelOnly' is only used inside the component,\n  // Automatically adjust width when only label children is included.\n  isLabelOnly?: boolean\n}\n\nconst defaultProps = {}\n\nexport type AutoCompleteItemProps = Props & React.HTMLAttributes<any>\n\nconst AutoCompleteItemComponent: React.FC<\n  React.PropsWithChildren<AutoCompleteItemProps>\n> = ({\n  value: identValue,\n  children,\n  isLabelOnly,\n}: React.PropsWithChildren<AutoCompleteItemProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { value, updateValue, updateVisible } = useAutoCompleteContext()\n  const selectHandler = () => {\n    updateValue && updateValue(identValue)\n    updateVisible && updateVisible(false)\n  }\n  const isActive = useMemo(() => value === identValue, [identValue, value])\n  const classes = useClasses('item', {\n    active: isActive,\n  })\n\n  return (\n    <div className={classes} onClick={selectHandler}>\n      {isLabelOnly ? <Ellipsis height={SCALES.height(2)}>{children}</Ellipsis> : children}\n      <style jsx>{`\n        .item {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n          font-weight: normal;\n          white-space: pre;\n          background-color: ${theme.palette.background};\n          color: ${theme.palette.foreground};\n          user-select: none;\n          border: 0;\n          cursor: pointer;\n          transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${isLabelOnly ? SCALES.height(2.5) : SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0.75)} ${SCALES.pb(0)} ${SCALES.pl(0.75)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .item:first-of-type {\n          border-top-left-radius: ${theme.layout.radius};\n          border-top-right-radius: ${theme.layout.radius};\n        }\n\n        .item:last-of-type {\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n        }\n\n        .item:hover {\n          background-color: ${theme.palette.accents_1};\n        }\n\n        .item.active {\n          background-color: ${theme.palette.accents_1};\n          color: ${theme.palette.success};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nAutoCompleteItemComponent.defaultProps = defaultProps\nAutoCompleteItemComponent.displayName = 'GeistAutoCompleteItem'\nconst AutoCompleteItem = withScale(AutoCompleteItemComponent)\nexport default AutoCompleteItem\n"
  },
  {
    "path": "components/auto-complete/auto-complete-searching.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\nexport type AutoCompleteSearchProps = Props & React.HTMLAttributes<any>\n\nconst AutoCompleteSearchComponent: React.FC<\n  React.PropsWithChildren<AutoCompleteSearchProps>\n> = ({\n  children,\n  className,\n}: React.PropsWithChildren<AutoCompleteSearchProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n\n  return (\n    <div className={className}>\n      {children}\n      <style jsx>{`\n        div {\n          display: flex;\n          justify-content: center;\n          text-align: center;\n          align-items: center;\n          font-weight: normal;\n          white-space: pre;\n          padding: ${theme.layout.gapHalf};\n          line-height: 1;\n          background-color: ${theme.palette.background};\n          color: ${theme.palette.accents_5};\n          user-select: none;\n          border: 0;\n          border-radius: ${theme.layout.radius};\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0.875)} ${SCALES.pr(0.875)} ${SCALES.pb(0.875)}\n            ${SCALES.pl(0.875)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nAutoCompleteSearchComponent.defaultProps = defaultProps\nAutoCompleteSearchComponent.displayName = 'GeistAutoCompleteSearch'\nconst AutoCompleteSearch = withScale(AutoCompleteSearchComponent)\n\nexport default AutoCompleteSearch\n"
  },
  {
    "path": "components/auto-complete/auto-complete.tsx",
    "content": "import React, {\n  CSSProperties,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport Input from '../input'\nimport AutoCompleteItem, { AutoCompleteItemProps } from './auto-complete-item'\nimport AutoCompleteDropdown from './auto-complete-dropdown'\nimport AutoCompleteSearching from './auto-complete-searching'\nimport AutoCompleteEmpty from './auto-complete-empty'\nimport { AutoCompleteContext, AutoCompleteConfig } from './auto-complete-context'\nimport { NormalTypes } from '../utils/prop-types'\nimport Loading from '../loading'\nimport { pickChild } from '../utils/collections'\nimport useCurrentState from '../utils/use-current-state'\nimport useScale, { withScale } from '../use-scale'\n\nexport type AutoCompleteTypes = NormalTypes\n\nexport type AutoCompleteOption = {\n  label: string\n  value: string\n}\n\nexport type AutoCompleteOptions = Array<\n  typeof AutoCompleteItem | AutoCompleteOption | React.ReactElement<AutoCompleteItemProps>\n>\n\ninterface Props {\n  options?: AutoCompleteOptions\n  type?: AutoCompleteTypes\n  initialValue?: string\n  value?: string\n  onChange?: (value: string) => void\n  onSearch?: (value: string) => void\n  onSelect?: (value: string) => void\n  searching?: boolean | undefined\n  clearable?: boolean\n  dropdownClassName?: string\n  dropdownStyle?: CSSProperties\n  disableMatchWidth?: boolean\n  disableFreeSolo?: boolean\n  className?: string\n  getPopupContainer?: () => HTMLElement | null\n}\n\nconst defaultProps = {\n  options: [] as AutoCompleteOptions,\n  initialValue: '',\n  disabled: false,\n  clearable: false,\n  type: 'default' as AutoCompleteTypes,\n  disableMatchWidth: false,\n  disableFreeSolo: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>\nexport type AutoCompleteProps = Props & NativeAttrs\n\nconst childrenToOptionsNode = (options: Array<AutoCompleteOption>) =>\n  options.map((item, index) => {\n    const key = `auto-complete-item-${index}`\n    if (React.isValidElement(item)) return React.cloneElement(item, { key })\n    const validItem = item as AutoCompleteOption\n    return (\n      <AutoCompleteItem key={key} value={validItem.value} isLabelOnly>\n        {validItem.label}\n      </AutoCompleteItem>\n    )\n  })\n\n// When the search is not set, the \"clearable\" icon can be displayed in the original location.\n// When the search is seted, at least one element should exist to avoid re-render.\nconst getSearchIcon = (searching?: boolean, scale: string | number = 1) => {\n  if (searching === undefined) return null\n  return searching ? <Loading scale={+scale / 2} /> : <span />\n}\n\nconst AutoCompleteComponent = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<AutoCompleteProps>\n>(\n  (\n    {\n      options,\n      initialValue: customInitialValue,\n      onSelect,\n      onSearch,\n      onChange,\n      searching,\n      children,\n      type,\n      value,\n      clearable,\n      disabled,\n      dropdownClassName,\n      dropdownStyle,\n      disableMatchWidth,\n      disableFreeSolo,\n      getPopupContainer,\n      ...props\n    }: React.PropsWithChildren<AutoCompleteProps> & typeof defaultProps,\n    userRef: React.Ref<HTMLInputElement | null>,\n  ) => {\n    const resetTimer = useRef<number>()\n    const { SCALES, getScaleProps } = useScale()\n    const ref = useRef<HTMLDivElement>(null)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [state, setState, stateRef] = useCurrentState<string>(customInitialValue)\n    const [selectVal, setSelectVal] = useState<string>(customInitialValue)\n    const [visible, setVisible] = useState<boolean>(false)\n    useImperativeHandle(userRef, () => inputRef.current)\n\n    const [, searchChild] = pickChild(children, AutoCompleteSearching)\n    const [, emptyChild] = pickChild(children, AutoCompleteEmpty)\n    const autoCompleteItems = useMemo(() => {\n      const hasSearchChild = searchChild && React.Children.count(searchChild) > 0\n      const hasEmptyChild = emptyChild && React.Children.count(emptyChild) > 0\n      if (searching) {\n        return hasSearchChild ? (\n          searchChild\n        ) : (\n          <AutoCompleteSearching>Searching...</AutoCompleteSearching>\n        )\n      }\n      if (options.length === 0) {\n        if (state === '') return null\n        return hasEmptyChild ? (\n          emptyChild\n        ) : (\n          <AutoCompleteEmpty>No Options</AutoCompleteEmpty>\n        )\n      }\n      return childrenToOptionsNode(options as Array<AutoCompleteOption>)\n    }, [searching, options])\n    const showClearIcon = useMemo(\n      () => clearable && searching === undefined,\n      [clearable, searching],\n    )\n\n    const updateValue = (val: string) => {\n      if (disabled) return\n      setSelectVal(val)\n      onSelect && onSelect(val)\n      setState(val)\n      inputRef.current && inputRef.current.focus()\n    }\n    const updateVisible = (next: boolean) => setVisible(next)\n    const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setVisible(true)\n      onSearch && onSearch(event.target.value)\n      setState(event.target.value)\n    }\n    const resetInputValue = () => {\n      if (!disableFreeSolo) return\n      if (!state || state === '') return\n      if (state !== selectVal) {\n        setState(selectVal)\n      }\n    }\n\n    useEffect(() => {\n      onChange && onChange(state)\n    }, [state])\n    useEffect(() => {\n      if (value === undefined) return\n      setState(value)\n    }, [value])\n\n    const initialValue = useMemo<AutoCompleteConfig>(\n      () => ({\n        ref,\n        value: state,\n        updateValue,\n        visible,\n        updateVisible,\n      }),\n      [state, visible],\n    )\n\n    const toggleFocusHandler = (next: boolean) => {\n      clearTimeout(resetTimer.current)\n      setVisible(next)\n      if (next) {\n        onSearch && onSearch(stateRef.current)\n      } else {\n        resetTimer.current = window.setTimeout(() => {\n          resetInputValue()\n          clearTimeout(resetTimer.current)\n        }, 100)\n      }\n    }\n\n    const inputProps = {\n      ...props,\n      disabled,\n      value: state,\n    }\n\n    return (\n      <AutoCompleteContext.Provider value={initialValue}>\n        <div ref={ref} className=\"auto-complete\">\n          <Input\n            ref={inputRef}\n            type={type}\n            onChange={onInputChange}\n            onFocus={() => toggleFocusHandler(true)}\n            onBlur={() => toggleFocusHandler(false)}\n            clearable={showClearIcon}\n            width={SCALES.width(1, 'initial')}\n            height={SCALES.height(2.25)}\n            iconRight={getSearchIcon(searching, getScaleProps('scale'))}\n            {...inputProps}\n          />\n          <AutoCompleteDropdown\n            visible={visible}\n            disableMatchWidth={disableMatchWidth}\n            className={dropdownClassName}\n            dropdownStyle={dropdownStyle}\n            getPopupContainer={getPopupContainer}>\n            {autoCompleteItems}\n          </AutoCompleteDropdown>\n\n          <style jsx>{`\n            .auto-complete {\n              width: ${SCALES.width(1, 'max-content')};\n              height: ${SCALES.height(1, 'auto')};\n              padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n              margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n            }\n\n            .auto-complete :global(.loading) {\n              width: max-content;\n            }\n          `}</style>\n        </div>\n      </AutoCompleteContext.Provider>\n    )\n  },\n)\n\nAutoCompleteComponent.defaultProps = defaultProps\nAutoCompleteComponent.displayName = 'GeistAutoComplete'\nconst AutoComplete = withScale(AutoCompleteComponent)\n\nexport default AutoComplete\n"
  },
  {
    "path": "components/auto-complete/index.ts",
    "content": "import AutoComplete from './auto-complete'\nimport AutoCompleteItem from './auto-complete-item'\nimport AutoCompleteSearching from './auto-complete-searching'\nimport AutoCompleteEmpty from './auto-complete-empty'\n\nexport type AutoCompleteComponentType = typeof AutoComplete & {\n  Item: typeof AutoCompleteItem\n  Option: typeof AutoCompleteItem\n  Searching: typeof AutoCompleteSearching\n  Empty: typeof AutoCompleteEmpty\n}\n;(AutoComplete as AutoCompleteComponentType).Item = AutoCompleteItem\n;(AutoComplete as AutoCompleteComponentType).Option = AutoCompleteItem\n;(AutoComplete as AutoCompleteComponentType).Searching = AutoCompleteSearching\n;(AutoComplete as AutoCompleteComponentType).Empty = AutoCompleteEmpty\n\nexport type {\n  AutoCompleteOption,\n  AutoCompleteOptions,\n  AutoCompleteProps,\n  AutoCompleteTypes,\n} from './auto-complete'\nexport default AutoComplete as AutoCompleteComponentType\n"
  },
  {
    "path": "components/avatar/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Avatar should render text element 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"avatar\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"avatar-text\",\n        },\n        \"children\": Array [],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"avatar-text\",\n          },\n          \"children\": Array [],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"span\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Avatar should render text element 2`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"avatar\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"avatar-text\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"text\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"avatar-text\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"text\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"span\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Avatar should stacked when avatars are in a group 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"avatar-group\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"avatar\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"avatar-text\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"avatar-text\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"avatar\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"avatar-text\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar-text\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .avatar-group {\n          display: flex;\n          align-items: center;\n          width: max-content;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-group :global(.avatar) {\n          margin-left: -calc(0.625 * 16px);\n        }\n\n        .count {\n          font-size: calc(0.875 * 16px);\n          display: inline-flex;\n          align-items: center;\n          padding-left: 5.5px;\n          color: #333;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"avatar\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"avatar-text\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"avatar-text\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .avatar-group {\n          display: flex;\n          align-items: center;\n          width: max-content;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-group :global(.avatar) {\n          margin-left: -calc(0.625 * 16px);\n        }\n\n        .count {\n          font-size: calc(0.875 * 16px);\n          display: inline-flex;\n          align-items: center;\n          padding-left: 5.5px;\n          color: #333;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"avatar\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"avatar-text\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar-text\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .avatar-group {\n          display: flex;\n          align-items: center;\n          width: max-content;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-group :global(.avatar) {\n          margin-left: -calc(0.625 * 16px);\n        }\n\n        .count {\n          font-size: calc(0.875 * 16px);\n          display: inline-flex;\n          align-items: center;\n          padding-left: 5.5px;\n          color: #333;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"avatar\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"avatar-text\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar-text\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"avatar\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar-text\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar-text\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/avatar/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render, shallow } from 'enzyme'\nimport { Avatar } from 'components'\n\ndescribe('Avatar', () => {\n  it('should support square and circle', () => {\n    const circle = shallow(<Avatar />)\n    expect(() => circle.unmount()).not.toThrow()\n    const square = shallow(<Avatar isSquare />)\n    expect(() => square.unmount()).not.toThrow()\n  })\n\n  it('should render text element', () => {\n    const imageAvatar = render(<Avatar />)\n    expect(imageAvatar).toMatchSnapshot()\n    const textAvatar = render(<Avatar text=\"text\" />)\n    expect(textAvatar).toMatchSnapshot()\n  })\n\n  it('should omit long chars automatically', () => {\n    const avatar = mount(<Avatar text=\"texttexttexttext\" />)\n    const text = avatar.find('.avatar-text').text()\n    expect(text.length).toBeLessThan(4)\n  })\n\n  it('stacked should be work', () => {\n    const avatar = shallow(<Avatar src=\"/images/avatar.png\" stacked />)\n    expect(() => avatar.unmount()).not.toThrow()\n  })\n\n  it('group component should render all children', () => {\n    const group = mount(\n      <Avatar.Group>\n        <Avatar />\n        <Avatar />\n      </Avatar.Group>,\n    )\n    expect(group.find('.avatar')).toHaveLength(2)\n  })\n\n  it('should stacked when avatars are in a group', () => {\n    const group = render(\n      <Avatar.Group>\n        <Avatar />\n        <Avatar />\n      </Avatar.Group>,\n    )\n    expect(group).toMatchSnapshot()\n  })\n\n  it('should show count in group', () => {\n    const count = 20\n    const group = render(<Avatar.Group count={count} />)\n    const text = group.find('.count').text()\n    expect(text).toMatch(`${count}`)\n  })\n})\n"
  },
  {
    "path": "components/avatar/avatar-group.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  count?: number\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type AvatarGroupProps = Props & NativeAttrs\n\nconst AvatarGroupComponent: React.FC<React.PropsWithChildren<AvatarGroupProps>> = ({\n  count,\n  className,\n  children,\n}: AvatarGroupProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n\n  return (\n    <div className={useClasses('avatar-group', className)}>\n      {children}\n      {count && <span className=\"count\">+{count}</span>}\n      <style jsx>{`\n        .avatar-group {\n          display: flex;\n          align-items: center;\n          width: ${SCALES.width(1, 'max-content')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .avatar-group :global(.avatar) {\n          margin-left: -${SCALES.ml(0.625)};\n        }\n\n        .count {\n          font-size: ${SCALES.font(0.875)};\n          display: inline-flex;\n          align-items: center;\n          padding-left: 5.5px;\n          color: ${theme.palette.accents_7};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nAvatarGroupComponent.defaultProps = defaultProps\nAvatarGroupComponent.displayName = 'GeistAvatarGroup'\nconst AvatarGroup = withScale(AvatarGroupComponent)\nexport default AvatarGroup\n"
  },
  {
    "path": "components/avatar/avatar.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  src?: string\n  stacked?: boolean\n  text?: string\n  isSquare?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  stacked: false,\n  text: '',\n  isSquare: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<\n  Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>,\n  keyof Props\n>\nexport type AvatarProps = Props & NativeAttrs\n\nconst safeText = (text: string): string => {\n  if (text.length <= 4) return text\n  return text.slice(0, 3)\n}\n\nconst AvatarComponent: React.FC<AvatarProps> = ({\n  src,\n  stacked,\n  text,\n  isSquare,\n  className,\n  ...props\n}: AvatarProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const showText = !src\n  const radius = isSquare ? theme.layout.radius : '50%'\n  const marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0)\n  const classes = useClasses('avatar', className)\n\n  return (\n    <span className={classes}>\n      {!showText && (\n        <img alt=\"avatar\" className=\"avatar-img\" src={src} draggable={false} {...props} />\n      )}\n      {showText && (\n        <span className=\"avatar-text\" {...props}>\n          {safeText(text)}\n        </span>\n      )}\n\n      <style jsx>{`\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid ${theme.palette.accents_2};\n          border-radius: ${radius};\n          vertical-align: top;\n          background-color: ${theme.palette.background};\n          box-sizing: border-box;\n          width: ${SCALES.width(1.75) || SCALES.height(1.75)};\n          height: ${SCALES.height(1.75) || SCALES.width(1.75)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${marginLeft};\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: ${radius};\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: ${SCALES.font(1)};\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      `}</style>\n    </span>\n  )\n}\n\nAvatarComponent.defaultProps = defaultProps\nAvatarComponent.displayName = 'GeistAvatar'\nconst Avatar = withScale(AvatarComponent)\nexport default Avatar\n"
  },
  {
    "path": "components/avatar/index.ts",
    "content": "import Avatar from './avatar'\nimport AvatarGroup from './avatar-group'\n\nexport type AvatarComponentType = typeof Avatar & {\n  Group: typeof AvatarGroup\n}\n;(Avatar as AvatarComponentType).Group = AvatarGroup\n\nexport type { AvatarProps } from './avatar'\nexport type { AvatarGroupProps } from './avatar-group'\n\nexport default Avatar as AvatarComponentType\n"
  },
  {
    "path": "components/badge/__tests__/__snapshots__/anchor.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BadgeAnchor should be support multiple position 1`] = `\n\"<div class=\\\\\"anchor\\\\\"><button>btn</button><sup><span class=\\\\\"badge\\\\\">test<style>\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #000;\n          color: #fff;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      </style></span></sup><style>\n        .anchor {\n          position: relative;\n          display: inline-flex;\n          vertical-align: middle;\n          flex-shrink: 0;\n          box-sizing: border-box;\n        }\n\n        sup {\n          position: absolute;\n          top: 0;\n          left: auto;\n          right: 0;\n          bottom: auto;\n          transform: translate(50%, -50%);\n          transform-origin: 100% 0%;\n          z-index: 1;\n        }\n      </style></div>\"\n`;\n\nexports[`BadgeAnchor should be support multiple position 2`] = `\n\"<div class=\\\\\"anchor\\\\\"><button>btn</button><sup><span class=\\\\\"badge\\\\\">test<style>\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #000;\n          color: #fff;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      </style></span></sup><style>\n        .anchor {\n          position: relative;\n          display: inline-flex;\n          vertical-align: middle;\n          flex-shrink: 0;\n          box-sizing: border-box;\n        }\n\n        sup {\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: auto;\n          bottom: auto;\n          transform: translate(-50%, -50%);\n          transform-origin: 0% 0%;\n          z-index: 1;\n        }\n      </style></div>\"\n`;\n\nexports[`BadgeAnchor should be support multiple position 3`] = `\n\"<div class=\\\\\"anchor\\\\\"><button>btn</button><sup><span class=\\\\\"badge\\\\\">test<style>\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #000;\n          color: #fff;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      </style></span></sup><style>\n        .anchor {\n          position: relative;\n          display: inline-flex;\n          vertical-align: middle;\n          flex-shrink: 0;\n          box-sizing: border-box;\n        }\n\n        sup {\n          position: absolute;\n          top: auto;\n          left: auto;\n          right: 0;\n          bottom: 0;\n          transform: translate(50%, 50%);\n          transform-origin: 100% 100%;\n          z-index: 1;\n        }\n      </style></div>\"\n`;\n"
  },
  {
    "path": "components/badge/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Badge should re-render when size changed 1`] = `ReactWrapper {}`;\n\nexports[`Badge should re-render when size changed 2`] = `ReactWrapper {}`;\n\nexports[`Badge should render different types 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"badge\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"badge\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"badge\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"badge\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"badge\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"badge\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"badge\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"badge\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"badge\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"badge\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"badge\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"badge\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"badge\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"badge\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"badge\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"badge\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"badge\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"badge\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"badge\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"badge\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"badge\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"badge\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"badge\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"badge\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"badge\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"badge\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"badge\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"badge\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"badge\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"badge\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"badge\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"badge\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"badge\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"badge\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"badge\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"badge\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"badge\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"badge\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #e00;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"badge\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"badge\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"badge\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #f5a623;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"badge\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"badge\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"badge\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #666;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"badge\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"badge\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"badge\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #0070f3;\n          color: white;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"badge\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Badge should supoort text 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"badge\",\n    },\n    \"children\": Array [\n      Node {\n        \"data\": \"count\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #000;\n          color: #fff;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"text\",\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: #000;\n          color: #fff;\n          border: 0;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.25 * 16px) calc(0.4375 * 16px) calc(0.25 * 16px)\n            calc(0.4375 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .dot {\n          padding: calc(0.25 * 16px) calc(0.25 * 16px);\n          border-radius: 50%;\n          user-select: none;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"data\": \"count\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"text\",\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"span\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/badge/__tests__/anchor.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Badge } from 'components'\n\ndescribe('BadgeAnchor', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Badge.Anchor>\n        <Badge>test</Badge>\n        <a>link</a>\n      </Badge.Anchor>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be work without Badge', () => {\n    const wrapper = mount(\n      <Badge.Anchor>\n        <a>link</a>\n      </Badge.Anchor>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be support multiple position', () => {\n    const wrapper = mount(\n      <Badge.Anchor>\n        <Badge>test</Badge>\n        <button>btn</button>\n      </Badge.Anchor>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n\n    wrapper.setProps({ placement: 'topLeft' })\n    expect(wrapper.html()).toMatchSnapshot()\n\n    wrapper.setProps({ placement: 'bottomRight' })\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "components/badge/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render, shallow } from 'enzyme'\nimport Badge from '../badge'\n\ndescribe('Badge', () => {\n  it('should supoort text', () => {\n    const html = render(<Badge>count</Badge>)\n    expect(html).toMatchSnapshot()\n    const badge = mount(<Badge>count</Badge>)\n    expect(() => badge.unmount()).not.toThrow()\n  })\n\n  it('should support baisc sizes', () => {\n    const mini = shallow(<Badge scale={2}>mini</Badge>)\n    expect(() => mini.unmount()).not.toThrow()\n\n    const small = shallow(<Badge scale={5}>small</Badge>)\n    expect(() => small.unmount()).not.toThrow()\n\n    const medium = shallow(<Badge scale={10}>medium</Badge>)\n    expect(() => medium.unmount()).not.toThrow()\n\n    const large = shallow(<Badge margin=\"20px\">large</Badge>)\n    expect(() => large.unmount()).not.toThrow()\n  })\n\n  it('should re-render when size changed', () => {\n    const badge = mount(<Badge>size</Badge>)\n    badge.setProps({ size: 'small' })\n    expect(badge).toMatchSnapshot()\n\n    badge.setProps({ size: 'mini' })\n    expect(badge).toMatchSnapshot()\n  })\n\n  it('should render different types', () => {\n    const wrapper = render(\n      <div>\n        <Badge type=\"success\">badge</Badge>\n        <Badge type=\"secondary\">badge</Badge>\n        <Badge type=\"warning\">badge</Badge>\n        <Badge type=\"error\">badge</Badge>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should overwrite style by inline-style', () => {\n    const badge = mount(\n      <Badge style={{ background: 'white' }} type=\"success\">\n        badge\n      </Badge>,\n    )\n    const span = badge.find('span')\n    expect(span).not.toBeUndefined()\n    expect(span.props().style).not.toBeUndefined()\n    expect((span.props().style as any).background).toBe('white')\n  })\n\n  it('should hide content when in dot mode', () => {\n    const wrapper = mount(<Badge dot>test-value</Badge>)\n    expect(wrapper.html()).not.toContain('test-value')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/badge/badge-anchor.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { pickChild } from '../utils/collections'\nimport { tuple } from '../utils/prop-types'\nimport Badge from './badge'\n\nconst placement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight')\n\nexport type BadgeAnchorPlacement = typeof placement[number]\n\ninterface Props {\n  placement?: BadgeAnchorPlacement\n  className?: string\n}\n\nconst defaultProps = {\n  placement: 'topRight' as BadgeAnchorPlacement,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type BadgeAnchorProps = Props & NativeAttrs\n\ntype TransformStyles = {\n  top?: string\n  bottom?: string\n  left?: string\n  right?: string\n  value: string\n  origin: string\n}\n\nconst getTransform = (placement: BadgeAnchorPlacement): TransformStyles => {\n  const styles: { [key in BadgeAnchorPlacement]: TransformStyles } = {\n    topLeft: {\n      top: '0',\n      left: '0',\n      value: 'translate(-50%, -50%)',\n      origin: '0% 0%',\n    },\n    topRight: {\n      top: '0',\n      right: '0',\n      value: 'translate(50%, -50%)',\n      origin: '100% 0%',\n    },\n    bottomLeft: {\n      left: '0',\n      bottom: '0',\n      value: 'translate(-50%, 50%)',\n      origin: '0% 100%',\n    },\n    bottomRight: {\n      right: '0',\n      bottom: '0',\n      value: 'translate(50%, 50%)',\n      origin: '100% 100%',\n    },\n  }\n  return styles[placement]\n}\n\nconst BadgeAnchor: React.FC<React.PropsWithChildren<BadgeAnchorProps>> = ({\n  children,\n  placement,\n}: BadgeAnchorProps & typeof defaultProps) => {\n  const [withoutBadgeChildren, badgeChldren] = pickChild(children, Badge)\n  const { top, bottom, left, right, value, origin } = useMemo(\n    () => getTransform(placement),\n    [placement],\n  )\n\n  return (\n    <div className=\"anchor\">\n      {withoutBadgeChildren}\n      <sup>{badgeChldren}</sup>\n\n      <style jsx>{`\n        .anchor {\n          position: relative;\n          display: inline-flex;\n          vertical-align: middle;\n          flex-shrink: 0;\n          box-sizing: border-box;\n        }\n\n        sup {\n          position: absolute;\n          top: ${top || 'auto'};\n          left: ${left || 'auto'};\n          right: ${right || 'auto'};\n          bottom: ${bottom || 'auto'};\n          transform: ${value};\n          transform-origin: ${origin};\n          z-index: 1;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nBadgeAnchor.defaultProps = defaultProps\nBadgeAnchor.displayName = 'GeistBadgeAnchor'\nexport default BadgeAnchor\n"
  },
  {
    "path": "components/badge/badge.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { NormalTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type BadgeTypes = NormalTypes\n\ninterface Props {\n  type?: BadgeTypes\n  dot?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  type: 'default' as BadgeTypes,\n  dot: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type BadgeProps = Props & NativeAttrs\n\nconst getBgColor = (type: NormalTypes, palette: GeistUIThemesPalette) => {\n  const colors: { [key in NormalTypes]: string } = {\n    default: palette.foreground,\n    success: palette.success,\n    warning: palette.warning,\n    error: palette.error,\n    secondary: palette.secondary,\n  }\n  return colors[type]\n}\n\nconst BadgeComponent: React.FC<React.PropsWithChildren<BadgeProps>> = ({\n  type,\n  className,\n  children,\n  dot,\n  ...props\n}: BadgeProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const bg = useMemo(() => getBgColor(type, theme.palette), [type, theme.palette])\n  const color = useMemo(() => {\n    if (!type || type === 'default') return theme.palette.background\n    return 'white'\n  }, [type, theme.palette.background])\n  const classes = useClasses('badge', { dot }, className)\n\n  return (\n    <span className={classes} {...props}>\n      {!dot && children}\n      <style jsx>{`\n        .badge {\n          display: inline-block;\n          border-radius: 16px;\n          font-variant: tabular-nums;\n          line-height: 1;\n          vertical-align: middle;\n          background-color: ${bg};\n          color: ${color};\n          border: 0;\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0.25)} ${SCALES.pr(0.4375)} ${SCALES.pb(0.25)}\n            ${SCALES.pl(0.4375)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .dot {\n          padding: ${SCALES.py(0.25)} ${SCALES.px(0.25)};\n          border-radius: 50%;\n          user-select: none;\n        }\n      `}</style>\n    </span>\n  )\n}\n\nBadgeComponent.defaultProps = defaultProps\nBadgeComponent.displayName = 'GeistBadge'\nconst Badge = withScale(BadgeComponent)\nexport default Badge\n"
  },
  {
    "path": "components/badge/index.ts",
    "content": "import Badge from './badge'\nimport BadgeAnchor from './badge-anchor'\n\nexport type BadgeComponentType = typeof Badge & {\n  Anchor: typeof BadgeAnchor\n}\n;(Badge as BadgeComponentType).Anchor = BadgeAnchor\n\nexport type { BadgeProps, BadgeTypes } from './badge'\nexport type { BadgeAnchorProps, BadgeAnchorPlacement } from './badge-anchor'\nexport default Badge as BadgeComponentType\n"
  },
  {
    "path": "components/breadcrumbs/__tests__/__snapshots__/breadcrumbs.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Breadcrumbs should redefined all separators 1`] = `\n\"<nav class=\\\\\"\\\\\"><span class=\\\\\"breadcrumbs-item\\\\\">test-1</span><div class=\\\\\"separator\\\\\">*<style>\n        .separator {\n          display: inline-flex;\n          user-select: none;\n          pointer-events: none;\n          align-items: center;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n        }\n      </style></div><span class=\\\\\"breadcrumbs-item\\\\\">test-2</span><style>\n        nav {\n          line-height: inherit;\n          color: #888;\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        nav :global(.link:hover) {\n          color: rgba(0, 112, 243, 0.85);\n        }\n\n        nav > :global(span:last-of-type) {\n          color: #444;\n        }\n\n        nav > :global(.separator:last-child) {\n          display: none;\n        }\n\n        nav :global(svg) {\n          width: 1em;\n          height: 1em;\n          margin: 0 4px;\n        }\n\n        nav :global(.breadcrumbs-item) {\n          display: inline-flex;\n          align-items: center;\n        }\n      </style></nav>\"\n`;\n\nexports[`Breadcrumbs should render correctly 1`] = `\n\"<nav class=\\\\\"\\\\\"><span class=\\\\\"breadcrumbs-item\\\\\">test-1</span><style>\n        nav {\n          line-height: inherit;\n          color: #888;\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        nav :global(.link:hover) {\n          color: rgba(0, 112, 243, 0.85);\n        }\n\n        nav > :global(span:last-of-type) {\n          color: #444;\n        }\n\n        nav > :global(.separator:last-child) {\n          display: none;\n        }\n\n        nav :global(svg) {\n          width: 1em;\n          height: 1em;\n          margin: 0 4px;\n        }\n\n        nav :global(.breadcrumbs-item) {\n          display: inline-flex;\n          align-items: center;\n        }\n      </style></nav>\"\n`;\n"
  },
  {
    "path": "components/breadcrumbs/__tests__/breadcrumbs.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Breadcrumbs } from 'components'\n\ndescribe('Breadcrumbs', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Breadcrumbs>\n        <Breadcrumbs.Item>test-1</Breadcrumbs.Item>\n      </Breadcrumbs>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should redefined all separators', () => {\n    const wrapper = mount(\n      <Breadcrumbs separator=\"*\">\n        <Breadcrumbs.Item>test-1</Breadcrumbs.Item>\n        <Breadcrumbs.Item>test-2</Breadcrumbs.Item>\n      </Breadcrumbs>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(wrapper.html()).toContain('*')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the specified separator should be redefined', () => {\n    const wrapper = mount(\n      <Breadcrumbs separator=\"*\">\n        <Breadcrumbs.Item>test-1</Breadcrumbs.Item>\n        <Breadcrumbs.Separator>%</Breadcrumbs.Separator>\n        <Breadcrumbs.Item>test-2</Breadcrumbs.Item>\n      </Breadcrumbs>,\n    )\n    expect(wrapper.html()).toContain('%')\n  })\n\n  it('should render string when href missing', () => {\n    let wrapper = mount(\n      <Breadcrumbs>\n        <Breadcrumbs.Item>test-1</Breadcrumbs.Item>\n      </Breadcrumbs>,\n    )\n    let dom = wrapper.find('.breadcrumbs-item').at(0).getDOMNode()\n    expect(dom.tagName).toEqual('SPAN')\n\n    wrapper = mount(\n      <Breadcrumbs>\n        <Breadcrumbs.Item href=\"\">test-1</Breadcrumbs.Item>\n      </Breadcrumbs>,\n    )\n    dom = wrapper.find('.breadcrumbs-item').at(0).getDOMNode()\n    expect(dom.tagName).toEqual('A')\n\n    wrapper = mount(\n      <Breadcrumbs>\n        <Breadcrumbs.Item nextLink>test-1</Breadcrumbs.Item>\n      </Breadcrumbs>,\n    )\n    dom = wrapper.find('.breadcrumbs-item').at(0).getDOMNode()\n    expect(dom.tagName).toEqual('A')\n  })\n\n  it('should trigger click event', () => {\n    const handler = jest.fn()\n    const wrapper = mount(\n      <Breadcrumbs>\n        <Breadcrumbs.Item onClick={handler}>test-1</Breadcrumbs.Item>\n      </Breadcrumbs>,\n    )\n    wrapper.find('.breadcrumbs-item').at(0).simulate('click')\n    expect(handler).toHaveBeenCalled()\n  })\n})\n"
  },
  {
    "path": "components/breadcrumbs/breadcrumbs-item.tsx",
    "content": "import Link from '../link'\nimport { Props as LinkBasicProps } from '../link/link'\nimport React, { useMemo } from 'react'\nimport { pickChild } from '../utils/collections'\nimport BreadcrumbsSeparator from './breadcrumbs-separator'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  href?: string\n  nextLink?: boolean\n  onClick?: (event: React.MouseEvent) => void\n  className?: string\n}\n\nconst defaultProps = {\n  nextLink: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>\ntype NativeLinkAttrs = Omit<NativeAttrs, keyof LinkBasicProps>\nexport type BreadcrumbsItemProps = Props & NativeLinkAttrs\n\nconst BreadcrumbsItem = React.forwardRef<\n  HTMLAnchorElement,\n  React.PropsWithChildren<BreadcrumbsItemProps>\n>(\n  (\n    {\n      href,\n      nextLink,\n      onClick,\n      children,\n      className,\n      ...props\n    }: BreadcrumbsItemProps & typeof defaultProps,\n    ref: React.Ref<HTMLAnchorElement>,\n  ) => {\n    const isLink = useMemo(() => href !== undefined || nextLink, [href, nextLink])\n    const [withoutSepChildren] = pickChild(children, BreadcrumbsSeparator)\n    const classes = useClasses('breadcrumbs-item', className)\n\n    const clickHandler = (event: React.MouseEvent) => {\n      onClick && onClick(event)\n    }\n\n    if (!isLink) {\n      return (\n        <span className={classes} onClick={clickHandler}>\n          {withoutSepChildren}\n        </span>\n      )\n    }\n\n    return (\n      <Link className={classes} href={href} onClick={clickHandler} ref={ref} {...props}>\n        {withoutSepChildren}\n      </Link>\n    )\n  },\n)\n\nBreadcrumbsItem.defaultProps = defaultProps\nBreadcrumbsItem.displayName = 'GeistBreadcrumbsItem'\nexport default BreadcrumbsItem\n"
  },
  {
    "path": "components/breadcrumbs/breadcrumbs-separator.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type BreadcrumbsSeparatorProps = Props & NativeAttrs\n\nconst Separator: React.FC<React.PropsWithChildren<BreadcrumbsSeparatorProps>> = ({\n  children,\n  className,\n}: BreadcrumbsSeparatorProps & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const classes = useClasses('separator', className)\n\n  return (\n    <div className={classes}>\n      {children}\n      <style jsx>{`\n        .separator {\n          display: inline-flex;\n          user-select: none;\n          pointer-events: none;\n          align-items: center;\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0.5)} ${SCALES.mb(0)} ${SCALES.ml(0.5)};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nSeparator.defaultProps = defaultProps\nSeparator.displayName = 'GeistBreadcrumbsSeparator'\nconst BreadcrumbsSeparator = withScale(Separator)\nexport default BreadcrumbsSeparator\n"
  },
  {
    "path": "components/breadcrumbs/breadcrumbs.tsx",
    "content": "import React, { ReactNode, useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport BreadcrumbsSeparator from './breadcrumbs-separator'\nimport { addColorAlpha } from '../utils/color'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  separator?: string | ReactNode\n  className?: string\n}\n\nconst defaultProps = {\n  separator: '/',\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type BreadcrumbsProps = Props & NativeAttrs\n\nconst BreadcrumbsComponent: React.FC<React.PropsWithChildren<BreadcrumbsProps>> = ({\n  separator,\n  children,\n  className,\n}: BreadcrumbsProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const hoverColor = useMemo(() => {\n    return addColorAlpha(theme.palette.link, 0.85)\n  }, [theme.palette.link])\n\n  const childrenArray = React.Children.toArray(children)\n  const withSeparatorChildren = childrenArray.map((item, index) => {\n    if (!React.isValidElement(item)) return item\n    const last = childrenArray[index - 1]\n    const lastIsSeparator =\n      React.isValidElement(last) && last.type === BreadcrumbsSeparator\n    const currentIsSeparator = item.type === BreadcrumbsSeparator\n    if (!lastIsSeparator && !currentIsSeparator && index > 0) {\n      return (\n        <React.Fragment key={index}>\n          <BreadcrumbsSeparator>{separator}</BreadcrumbsSeparator>\n          {item}\n        </React.Fragment>\n      )\n    }\n    return item\n  })\n\n  return (\n    <nav className={className}>\n      {withSeparatorChildren}\n      <style jsx>{`\n        nav {\n          line-height: inherit;\n          color: ${theme.palette.accents_4};\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        nav :global(.link:hover) {\n          color: ${hoverColor};\n        }\n\n        nav > :global(span:last-of-type) {\n          color: ${theme.palette.accents_6};\n        }\n\n        nav > :global(.separator:last-child) {\n          display: none;\n        }\n\n        nav :global(svg) {\n          width: 1em;\n          height: 1em;\n          margin: 0 4px;\n        }\n\n        nav :global(.breadcrumbs-item) {\n          display: inline-flex;\n          align-items: center;\n        }\n      `}</style>\n    </nav>\n  )\n}\n\nBreadcrumbsComponent.defaultProps = defaultProps\nBreadcrumbsComponent.displayName = 'GeistBreadcrumbs'\nconst Breadcrumbs = withScale(BreadcrumbsComponent)\nexport default Breadcrumbs\n"
  },
  {
    "path": "components/breadcrumbs/index.ts",
    "content": "import Breadcrumbs from './breadcrumbs'\nimport BreadcrumbsItem from './breadcrumbs-item'\nimport BreadcrumbsSeparator from './breadcrumbs-separator'\n\nexport type BreadcrumbsComponentType = typeof Breadcrumbs & {\n  Item: typeof BreadcrumbsItem\n  Separator: typeof BreadcrumbsSeparator\n}\n;(Breadcrumbs as BreadcrumbsComponentType).Item = BreadcrumbsItem\n;(Breadcrumbs as BreadcrumbsComponentType).Separator = BreadcrumbsSeparator\n\nexport type { BreadcrumbsProps } from './breadcrumbs'\nexport type { BreadcrumbsItemProps } from './breadcrumbs-item'\nexport type { BreadcrumbsSeparatorProps } from './breadcrumbs-separator'\nexport default Breadcrumbs as BreadcrumbsComponentType\n"
  },
  {
    "path": "components/button/__tests__/__snapshots__/icon.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ButtonIcon should render correctly 1`] = `\n\"<button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><span class=\\\\\"icon\\\\\"><svg></svg><style>\n        .icon {\n          position: absolute;\n          left: var(--geist-ui-button-icon-padding);\n          right: auto;\n          top: 50%;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          color: var(--geist-ui-button-color);\n          z-index: 1;\n        }\n\n        .right {\n          right: var(--geist-ui-button-icon-padding);\n          left: auto;\n        }\n\n        .icon :global(svg) {\n          background: transparent;\n          height: calc(var(--geist-ui-button-height) / 2.35);\n          width: calc(var(--geist-ui-button-height) / 2.35);\n        }\n\n        .single {\n          position: static;\n          transform: none;\n        }\n      </style></span><div class=\\\\\"text left\\\\\">action<style>\n          .left {\n            padding-left: 0;\n          }\n          .right {\n            padding-right: 0;\n          }\n        </style></div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: calc(10.5 * 16px);\n            width: initial;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.375 * 16px) 0 calc(1.375 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button>\"\n`;\n\nexports[`ButtonIcon should work with right 1`] = `\n\"<button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><span class=\\\\\"icon right\\\\\"><svg></svg><style>\n        .icon {\n          position: absolute;\n          left: var(--geist-ui-button-icon-padding);\n          right: auto;\n          top: 50%;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          color: var(--geist-ui-button-color);\n          z-index: 1;\n        }\n\n        .right {\n          right: var(--geist-ui-button-icon-padding);\n          left: auto;\n        }\n\n        .icon :global(svg) {\n          background: transparent;\n          height: calc(var(--geist-ui-button-height) / 2.35);\n          width: calc(var(--geist-ui-button-height) / 2.35);\n        }\n\n        .single {\n          position: static;\n          transform: none;\n        }\n      </style></span><div class=\\\\\"text right\\\\\">action<style>\n          .left {\n            padding-left: 0;\n          }\n          .right {\n            padding-right: 0;\n          }\n        </style></div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: calc(10.5 * 16px);\n            width: initial;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.375 * 16px) 0 calc(1.375 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button>\"\n`;\n\nexports[`ButtonIcon should work without text 1`] = `\n\"<button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><span class=\\\\\"icon right single\\\\\"><svg></svg><style>\n        .icon {\n          position: absolute;\n          left: var(--geist-ui-button-icon-padding);\n          right: auto;\n          top: 50%;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          color: var(--geist-ui-button-color);\n          z-index: 1;\n        }\n\n        .right {\n          right: var(--geist-ui-button-icon-padding);\n          left: auto;\n        }\n\n        .icon :global(svg) {\n          background: transparent;\n          height: calc(var(--geist-ui-button-height) / 2.35);\n          width: calc(var(--geist-ui-button-height) / 2.35);\n        }\n\n        .single {\n          position: static;\n          transform: none;\n        }\n      </style></span><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: calc(10.5 * 16px);\n            width: initial;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.375 * 16px) 0 calc(1.375 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button>\"\n`;\n"
  },
  {
    "path": "components/button/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Button should render empty button correctly 1`] = `<ScaleGeistButton />`;\n\nexports[`Button should render special styles 1`] = `ReactWrapper {}`;\n\nexports[`Button should render special styles 2`] = `\n<ScaleGeistButton\n  loading={true}\n>\n  button\n</ScaleGeistButton>\n`;\n"
  },
  {
    "path": "components/button/__tests__/icon.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Button } from 'components'\nconst Icon: React.FC<any> = () => <svg />\n\ndescribe('ButtonIcon', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Button icon={<Icon />}>action</Button>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with right', () => {\n    const wrapper = mount(<Button iconRight={<Icon />}>action</Button>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work without text', () => {\n    const wrapper = mount(<Button iconRight={<Icon />} />)\n    const text = wrapper.find('.text')\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(text.length).toBe(0)\n  })\n\n  it('the width of the text should be filled', () => {\n    const autoWrapper = mount(\n      <Button auto icon={<Icon />}>\n        action\n      </Button>,\n    )\n    const wrapper = mount(<Button icon={<Icon />}>action</Button>)\n\n    const autoHtml = autoWrapper.find('.text').html()\n    const html = wrapper.find('.text').html()\n    expect(html).not.toEqual(autoHtml)\n\n    const mini = mount(<Button>action</Button>)\n    const miniIcon = mount(\n      <Button scale={2} icon={<Icon />}>\n        action\n      </Button>,\n    )\n    const miniHtml = mini.find('.text').html()\n    const miniIconHtml = miniIcon.find('.text').html()\n    expect(miniHtml).not.toEqual(miniIconHtml)\n  })\n})\n"
  },
  {
    "path": "components/button/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Button } from 'components'\nimport { sleep } from 'tests/utils'\n\ndescribe('Button', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Button>Button</Button>)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support all types', () => {\n    const wrapper = mount(\n      <div>\n        <Button type=\"secondary\" />\n        <Button type=\"secondary-light\" />\n        <Button type=\"success\" />\n        <Button type=\"success-light\" />\n        <Button type=\"warning\" />\n        <Button type=\"warning-light\" />\n        <Button type=\"error\" />\n        <Button type=\"error-light\" />\n        <Button type=\"abort\" />\n      </div>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render different text', () => {\n    const wrapper = mount(<Button>button</Button>)\n    expect(wrapper.text()).toContain('button')\n\n    wrapper.setProps({\n      children: <span>按钮</span>,\n    })\n    expect(wrapper.text()).toContain('按钮')\n  })\n\n  it('should render empty button correctly', () => {\n    expect(<Button></Button>).toMatchSnapshot()\n  })\n\n  it('should trigger callback function', () => {\n    const WrapperButton = () => {\n      const [state, setState] = React.useState<string>('state1')\n      return <Button onClick={() => setState('state2')}>{state}</Button>\n    }\n    const wrapper = mount(<WrapperButton />)\n    expect(wrapper.text()).toContain('state1')\n\n    wrapper.simulate('click')\n    expect(wrapper.text()).toContain('state2')\n  })\n\n  it('should ignore events when disabled', () => {\n    const WrapperButton = () => {\n      const [state, setState] = React.useState<string>('state1')\n      return (\n        <Button disabled onClick={() => setState('state2')}>\n          {state}\n        </Button>\n      )\n    }\n    const wrapper = mount(<WrapperButton />)\n    expect(wrapper.text()).toContain('state1')\n\n    wrapper.simulate('click')\n    expect(wrapper.text()).toContain('state1')\n    expect(wrapper.text()).not.toContain('state2')\n  })\n\n  it('should ignore events when loading', () => {\n    const WrapperButton = () => {\n      const [state, setState] = React.useState<string>('state1')\n      return (\n        <Button loading onClick={() => setState('state2')}>\n          {state}\n        </Button>\n      )\n    }\n    const wrapper = mount(<WrapperButton />)\n    wrapper.simulate('click')\n    expect(wrapper.text()).not.toContain('state2')\n  })\n\n  it('should render special styles', () => {\n    const wrapper = mount(\n      <div>\n        <Button ghost>button</Button>\n        <Button ghost type=\"success\">\n          button\n        </Button>\n        <Button ghost type=\"warning\">\n          button\n        </Button>\n        <Button ghost loading>\n          button\n        </Button>\n        <Button shadow>button</Button>\n        <Button auto>button</Button>\n        <Button effect={false}>button</Button>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n    expect(<Button loading>button</Button>).toMatchSnapshot()\n  })\n\n  it('should remove expired events', () => {\n    const wrapper = mount(<Button>button</Button>)\n    wrapper.simulate('click')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support loading change with deply', async () => {\n    const wrapper = mount(<Button>button</Button>)\n    wrapper.simulate('click')\n    await sleep(500)\n    wrapper.setProps({ loading: true })\n    await sleep(500)\n    expect(wrapper.find('.loading-container').length).not.toBe(0)\n  })\n\n  it('ref should be forwarded', () => {\n    const ref = React.createRef<HTMLButtonElement>()\n    const wrapper = mount(<Button ref={ref}>action</Button>)\n    expect(wrapper.find('button').getDOMNode()).toEqual(ref.current)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/button/button-icon.tsx",
    "content": "import React from 'react'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  isRight?: boolean\n  isSingle?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  isRight: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type ButtonIconProps = Props & NativeAttrs\n\nconst ButtonIcon: React.FC<React.PropsWithChildren<ButtonIconProps>> = ({\n  isRight,\n  isSingle,\n  children,\n  className,\n  ...props\n}: ButtonIconProps & typeof defaultProps) => {\n  const classes = useClasses('icon', { right: isRight, single: isSingle }, className)\n\n  return (\n    <span className={classes} {...props}>\n      {children}\n      <style jsx>{`\n        .icon {\n          position: absolute;\n          left: var(--geist-ui-button-icon-padding);\n          right: auto;\n          top: 50%;\n          transform: translateY(-50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          color: var(--geist-ui-button-color);\n          z-index: 1;\n        }\n\n        .right {\n          right: var(--geist-ui-button-icon-padding);\n          left: auto;\n        }\n\n        .icon :global(svg) {\n          background: transparent;\n          height: calc(var(--geist-ui-button-height) / 2.35);\n          width: calc(var(--geist-ui-button-height) / 2.35);\n        }\n\n        .single {\n          position: static;\n          transform: none;\n        }\n      `}</style>\n    </span>\n  )\n}\n\nButtonIcon.defaultProps = defaultProps\nButtonIcon.displayName = 'GeistButtonIcon'\nexport default ButtonIcon\n"
  },
  {
    "path": "components/button/button-loading.tsx",
    "content": "import React from 'react'\nimport Loading from '../loading'\n\ninterface Props {\n  color: string\n}\n\nconst ButtonLoading: React.FC<React.PropsWithChildren<Props>> = ({ color }) => {\n  return (\n    <div className=\"btn-loading\">\n      <Loading color={color} />\n      <style jsx>{`\n        .btn-loading {\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          z-index: 2;\n          background-color: var(--geist-ui-button-bg);\n        }\n      `}</style>\n    </div>\n  )\n}\n\nButtonLoading.displayName = 'GeistButtonLoading'\nexport default ButtonLoading\n"
  },
  {
    "path": "components/button/button.drip.tsx",
    "content": "import React, { useEffect, useRef } from 'react'\n\ninterface Props {\n  x: number\n  y: number\n  onCompleted: () => void\n  color: string\n}\n\nconst defaultProps = {\n  x: 0,\n  y: 0,\n}\n\nexport type ButtonDrip = Props\n\nconst ButtonDrip: React.FC<ButtonDrip> = ({\n  x,\n  y,\n  color,\n  onCompleted,\n}: ButtonDrip & typeof defaultProps) => {\n  const dripRef = useRef<HTMLDivElement>(null)\n  /* istanbul ignore next */\n  const top = Number.isNaN(+y) ? 0 : y - 10\n  /* istanbul ignore next */\n  const left = Number.isNaN(+x) ? 0 : x - 10\n\n  useEffect(() => {\n    /* istanbul ignore next */\n    if (!dripRef.current) return\n    dripRef.current.addEventListener('animationend', onCompleted)\n    return () => {\n      /* istanbul ignore next */\n      if (!dripRef.current) return\n      dripRef.current.removeEventListener('animationend', onCompleted)\n    }\n  })\n\n  return (\n    <div ref={dripRef} className=\"drip\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" style={{ top, left }}>\n        <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n          <g fill={color}>\n            <rect width=\"100%\" height=\"100%\" rx=\"10\" />\n          </g>\n        </g>\n      </svg>\n\n      <style jsx>{`\n        .drip {\n          position: absolute;\n          left: 0;\n          right: 0;\n          top: 0;\n          bottom: 0;\n        }\n\n        svg {\n          position: absolute;\n          animation: 350ms ease-in expand;\n          animation-fill-mode: forwards;\n          width: 1rem;\n          height: 1rem;\n        }\n\n        @keyframes expand {\n          0% {\n            opacity: 0;\n            transform: scale(1);\n          }\n          30% {\n            opacity: 1;\n          }\n          80% {\n            opacity: 0.5;\n          }\n          100% {\n            transform: scale(28);\n            opacity: 0;\n          }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nButtonDrip.defaultProps = defaultProps\nButtonDrip.displayName = 'GeistButtonDrip'\nexport default ButtonDrip\n"
  },
  {
    "path": "components/button/button.tsx",
    "content": "import React, { useRef, useState, MouseEvent, useMemo, useImperativeHandle } from 'react'\nimport useScale, { withScale } from '../use-scale'\nimport useTheme from '../use-theme'\nimport ButtonDrip from './button.drip'\nimport ButtonLoading from './button-loading'\nimport { ButtonTypes } from '../utils/prop-types'\nimport { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils'\nimport { useButtonGroupContext } from '../button-group/button-group-context'\nimport {\n  getButtonColors,\n  getButtonCursor,\n  getButtonDripColor,\n  getButtonHoverColors,\n} from './styles'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  type?: ButtonTypes\n  ghost?: boolean\n  loading?: boolean\n  shadow?: boolean\n  auto?: boolean\n  effect?: boolean\n  disabled?: boolean\n  htmlType?: React.ButtonHTMLAttributes<any>['type']\n  icon?: React.ReactNode\n  iconRight?: React.ReactNode\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n  className?: string\n}\n\nconst defaultProps = {\n  type: 'default' as ButtonTypes,\n  htmlType: 'button' as React.ButtonHTMLAttributes<any>['type'],\n  ghost: false,\n  loading: false,\n  shadow: false,\n  auto: false,\n  effect: true,\n  disabled: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>\nexport type ButtonProps = Props & NativeAttrs\n\nconst ButtonComponent = React.forwardRef<\n  HTMLButtonElement,\n  React.PropsWithChildren<ButtonProps>\n>(\n  (\n    btnProps: ButtonProps & typeof defaultProps,\n    ref: React.Ref<HTMLButtonElement | null>,\n  ) => {\n    const theme = useTheme()\n    const { SCALES } = useScale()\n    const buttonRef = useRef<HTMLButtonElement>(null)\n    useImperativeHandle(ref, () => buttonRef.current)\n\n    const [dripShow, setDripShow] = useState<boolean>(false)\n    const [dripX, setDripX] = useState<number>(0)\n    const [dripY, setDripY] = useState<number>(0)\n    const groupConfig = useButtonGroupContext()\n    const filteredProps = filterPropsWithGroup(btnProps, groupConfig)\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    const {\n      children,\n      disabled,\n      type,\n      loading,\n      shadow,\n      ghost,\n      effect,\n      onClick,\n      auto,\n      icon,\n      htmlType,\n      iconRight,\n      className,\n      ...props\n    } = filteredProps\n    /* eslint-enable @typescript-eslint/no-unused-vars */\n\n    const { bg, border, color } = useMemo(\n      () => getButtonColors(theme.palette, filteredProps),\n      [theme.palette, filteredProps],\n    )\n    const hover = useMemo(\n      () => getButtonHoverColors(theme.palette, filteredProps),\n      [theme.palette, filteredProps],\n    )\n    const { cursor, events } = useMemo(\n      () => getButtonCursor(disabled, loading),\n      [disabled, loading],\n    )\n    const dripColor = useMemo(\n      () => getButtonDripColor(theme.palette, filteredProps),\n      [theme.palette, filteredProps],\n    )\n\n    /* istanbul ignore next */\n    const dripCompletedHandle = () => {\n      setDripShow(false)\n      setDripX(0)\n      setDripY(0)\n    }\n\n    const clickHandler = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || loading) return\n      const showDrip = !shadow && !ghost && effect\n      /* istanbul ignore next */\n      if (showDrip && buttonRef.current) {\n        const rect = buttonRef.current.getBoundingClientRect()\n        setDripShow(true)\n        setDripX(event.clientX - rect.left)\n        setDripY(event.clientY - rect.top)\n      }\n\n      onClick && onClick(event)\n    }\n\n    const childrenWithIcon = useMemo(\n      () =>\n        getButtonChildrenWithIcon(auto, children, {\n          icon,\n          iconRight,\n        }),\n      [auto, children, icon, iconRight],\n    )\n    const [paddingLeft, paddingRight] = [\n      auto ? SCALES.pl(1.15) : SCALES.pl(1.375),\n      auto ? SCALES.pr(1.15) : SCALES.pr(1.375),\n    ]\n\n    return (\n      <button\n        ref={buttonRef}\n        type={htmlType}\n        className={useClasses('btn', className)}\n        disabled={disabled}\n        onClick={clickHandler}\n        {...props}>\n        {loading && <ButtonLoading color={color} />}\n        {childrenWithIcon}\n        {dripShow && (\n          <ButtonDrip\n            x={dripX}\n            y={dripY}\n            color={dripColor}\n            onCompleted={dripCompletedHandle}\n          />\n        )}\n        <style jsx>{`\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: ${SCALES.height(2.5)};\n            border-radius: ${theme.layout.radius};\n            font-weight: 400;\n            font-size: ${SCALES.font(0.875)};\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: ${color};\n            background-color: ${bg};\n            border: 1px solid ${border};\n            cursor: ${cursor};\n            pointer-events: ${events};\n            box-shadow: ${shadow ? theme.expressiveness.shadowSmall : 'none'};\n            --geist-ui-button-icon-padding: ${SCALES.pl(0.727)};\n            --geist-ui-button-height: ${SCALES.height(2.5)};\n            --geist-ui-button-color: ${color};\n            --geist-ui-button-bg: ${bg};\n            min-width: ${auto ? 'min-content' : SCALES.width(10.5)};\n            width: ${auto ? 'auto' : 'initial'};\n            height: ${SCALES.height(2.5)};\n            padding: ${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: ${hover.color};\n            --geist-ui-button-color: ${hover.color};\n            background-color: ${hover.bg};\n            border-color: ${hover.border};\n            cursor: ${cursor};\n            pointer-events: ${events};\n            box-shadow: ${shadow ? theme.expressiveness.shadowMedium : 'none'};\n            transform: translate3d(0px, ${shadow ? '-1px' : '0px'}, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        `}</style>\n      </button>\n    )\n  },\n)\n\nButtonComponent.defaultProps = defaultProps\nButtonComponent.displayName = 'GeistButton'\nconst Button = withScale(ButtonComponent)\nexport default Button\n"
  },
  {
    "path": "components/button/index.ts",
    "content": "import Button from './button'\n\nexport type { ButtonProps } from './button'\nexport type { ButtonTypes } from '../utils/prop-types'\nexport default Button\n"
  },
  {
    "path": "components/button/styles.ts",
    "content": "import { GeistUIThemesPalette } from '../themes/presets'\nimport { ButtonTypes } from '../utils/prop-types'\nimport { ButtonProps } from './button'\nimport { addColorAlpha } from '../utils/color'\n\nexport interface ButtonColorGroup {\n  bg: string\n  border: string\n  color: string\n}\n\nexport const getButtonGhostColors = (\n  palette: GeistUIThemesPalette,\n  type: ButtonTypes,\n): ButtonColorGroup | null => {\n  const colors: { [key in ButtonTypes]?: ButtonColorGroup } = {\n    secondary: {\n      bg: palette.background,\n      border: palette.foreground,\n      color: palette.foreground,\n    },\n    success: {\n      bg: palette.background,\n      border: palette.success,\n      color: palette.success,\n    },\n    warning: {\n      bg: palette.background,\n      border: palette.warning,\n      color: palette.warning,\n    },\n    error: {\n      bg: palette.background,\n      border: palette.error,\n      color: palette.error,\n    },\n  }\n\n  return colors[type] || null\n}\n\nexport const getButtonColors = (\n  palette: GeistUIThemesPalette,\n  props: ButtonProps,\n): ButtonColorGroup => {\n  const { type, disabled, ghost } = props\n  const colors: { [key in ButtonTypes]?: ButtonColorGroup } = {\n    default: {\n      bg: palette.background,\n      border: palette.border,\n      color: palette.accents_5,\n    },\n    secondary: {\n      bg: palette.foreground,\n      border: palette.foreground,\n      color: palette.background,\n    },\n    success: {\n      bg: palette.success,\n      border: palette.success,\n      color: '#fff',\n    },\n    warning: {\n      bg: palette.warning,\n      border: palette.warning,\n      color: '#fff',\n    },\n    error: {\n      bg: palette.error,\n      border: palette.error,\n      color: '#fff',\n    },\n    abort: {\n      bg: 'transparent',\n      border: 'transparent',\n      color: palette.accents_5,\n    },\n  }\n  if (disabled)\n    return {\n      bg: palette.accents_1,\n      border: palette.accents_2,\n      color: '#ccc',\n    }\n\n  /**\n   * The '-light' type is the same color as the common type,\n   * only hover's color is different.\n   * e.g.\n   *   Color['success'] === Color['success-light']\n   *   Color['warning'] === Color['warning-light']\n   */\n  const withoutLightType = type?.replace('-light', '') as ButtonTypes\n  const defaultColor = colors.default as ButtonColorGroup\n\n  if (ghost) return getButtonGhostColors(palette, withoutLightType) || defaultColor\n  return colors[withoutLightType] || defaultColor\n}\n\nexport const getButtonGhostHoverColors = (\n  palette: GeistUIThemesPalette,\n  type: ButtonTypes,\n): ButtonColorGroup | null => {\n  const colors: { [key in ButtonTypes]?: ButtonColorGroup } = {\n    secondary: {\n      bg: palette.foreground,\n      border: palette.background,\n      color: palette.background,\n    },\n    success: {\n      bg: palette.success,\n      border: palette.background,\n      color: 'white',\n    },\n    warning: {\n      bg: palette.warning,\n      border: palette.background,\n      color: 'white',\n    },\n    error: {\n      bg: palette.error,\n      border: palette.background,\n      color: 'white',\n    },\n  }\n  const withoutLightType = type.replace('-light', '') as ButtonTypes\n  return colors[withoutLightType] || null\n}\n\nexport const getButtonHoverColors = (\n  palette: GeistUIThemesPalette,\n  props: ButtonProps,\n): ButtonColorGroup => {\n  const { type, disabled, loading, shadow, ghost } = props\n  const defaultColor = getButtonColors(palette, props)\n  const alphaBackground = addColorAlpha(defaultColor.bg, 0.85)\n  const colors: {\n    [key in ButtonTypes]: Omit<ButtonColorGroup, 'color'> & {\n      color?: string\n    }\n  } = {\n    default: {\n      bg: palette.background,\n      border: palette.foreground,\n    },\n    secondary: {\n      bg: palette.background,\n      border: palette.foreground,\n    },\n    success: {\n      bg: palette.background,\n      border: palette.success,\n    },\n    warning: {\n      bg: palette.background,\n      border: palette.warning,\n    },\n    error: {\n      bg: palette.background,\n      border: palette.error,\n    },\n    abort: {\n      bg: 'transparent',\n      border: 'transparent',\n      color: palette.accents_5,\n    },\n    'secondary-light': {\n      ...defaultColor,\n      bg: alphaBackground,\n    },\n    'success-light': {\n      ...defaultColor,\n      bg: alphaBackground,\n    },\n    'warning-light': {\n      ...defaultColor,\n      bg: alphaBackground,\n    },\n    'error-light': {\n      ...defaultColor,\n      bg: alphaBackground,\n    },\n  }\n  if (disabled)\n    return {\n      bg: palette.accents_1,\n      border: palette.accents_2,\n      color: '#ccc',\n    }\n  if (loading)\n    return {\n      ...defaultColor,\n      color: 'transparent',\n    }\n  if (shadow) return defaultColor\n\n  const hoverColor =\n    (ghost ? getButtonGhostHoverColors(palette, type!) : colors[type!]) || colors.default\n  return {\n    ...hoverColor,\n    color: hoverColor.color || hoverColor.border,\n  }\n}\n\nexport interface ButtonCursorGroup {\n  cursor: string\n  events: string\n}\n\nexport const getButtonCursor = (\n  disabled: boolean,\n  loading: boolean,\n): ButtonCursorGroup => {\n  if (disabled)\n    return {\n      cursor: 'not-allowed',\n      events: 'auto',\n    }\n  if (loading)\n    return {\n      cursor: 'default',\n      events: 'none',\n    }\n\n  return {\n    cursor: 'pointer',\n    events: 'auto',\n  }\n}\n\nexport const getButtonDripColor = (palette: GeistUIThemesPalette, props: ButtonProps) => {\n  const { type } = props\n  const isLightHover = type!.endsWith('light')\n  const hoverColors = getButtonHoverColors(palette, props)\n  return isLightHover\n    ? addColorAlpha(hoverColors.bg, 0.65)\n    : addColorAlpha(palette.accents_2, 0.65)\n}\n"
  },
  {
    "path": "components/button/utils.tsx",
    "content": "import React, { ReactNode } from 'react'\nimport ButtonIcon from './button-icon'\nimport { ButtonProps } from './button'\nimport { ButtonGroupConfig } from '../button-group/button-group-context'\nimport useClasses from '../use-classes'\n\nexport const getButtonChildrenWithIcon = (\n  auto: boolean,\n  children: ReactNode,\n  icons: {\n    icon?: React.ReactNode\n    iconRight?: React.ReactNode\n  },\n) => {\n  const { icon, iconRight } = icons\n  const hasIcon = icon || iconRight\n  const isRight = Boolean(iconRight)\n  const paddingForAutoMode = auto\n    ? `calc(var(--geist-ui-button-height) / 2 + var(--geist-ui-button-icon-padding) * .5)`\n    : 0\n  const classes = useClasses('text', isRight ? 'right' : 'left')\n\n  if (!hasIcon) return <div className=\"text\">{children}</div>\n  if (React.Children.count(children) === 0) {\n    return (\n      <ButtonIcon isRight={isRight} isSingle>\n        {hasIcon}\n      </ButtonIcon>\n    )\n  }\n  return (\n    <>\n      <ButtonIcon isRight={isRight}>{hasIcon}</ButtonIcon>\n      <div className={classes}>\n        {children}\n        <style jsx>{`\n          .left {\n            padding-left: ${paddingForAutoMode};\n          }\n          .right {\n            padding-right: ${paddingForAutoMode};\n          }\n        `}</style>\n      </div>\n    </>\n  )\n}\n\nexport const filterPropsWithGroup = <T extends React.PropsWithChildren<ButtonProps>>(\n  props: T,\n  config: ButtonGroupConfig,\n): T => {\n  if (!config.isButtonGroup) return props\n  return {\n    ...props,\n    auto: true,\n    shadow: false,\n    ghost: config.ghost || props.ghost,\n    type: config.type || props.type,\n    disabled: config.disabled || props.disabled,\n  }\n}\n"
  },
  {
    "path": "components/button-dropdown/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Button Dropdown should render multiple types 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"btn-dropdown\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"Auto Mini\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"Auto Mini\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"button\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"dropdown-box\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"height\": \"calc(2.5 * 16px)\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"#666\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1\",\n                        \"style\": \"color:#666\",\n                        \"viewBox\": \"0 0 24 24\",\n                        \"width\": \"calc(2.5 * 16px)\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"height\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                        \"width\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"height\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                        \"width\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"summary\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"Auto Mini\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"button\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"Auto Mini\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"button\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"dropdown-box\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"height\": \"calc(2.5 * 16px)\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"#666\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1\",\n                          \"style\": \"color:#666\",\n                          \"viewBox\": \"0 0 24 24\",\n                          \"width\": \"calc(2.5 * 16px)\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"summary\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n          ],\n          \"name\": \"details\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"dropdown-box\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"height\": \"calc(2.5 * 16px)\",\n                      \"shape-rendering\": \"geometricPrecision\",\n                      \"stroke\": \"#666\",\n                      \"stroke-linecap\": \"round\",\n                      \"stroke-linejoin\": \"round\",\n                      \"stroke-width\": \"1\",\n                      \"style\": \"color:#666\",\n                      \"viewBox\": \"0 0 24 24\",\n                      \"width\": \"calc(2.5 * 16px)\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M6 9l6 6 6-6\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"height\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                      \"width\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"height\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                      \"width\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"summary\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"content\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"dropdown-box\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"height\": \"calc(2.5 * 16px)\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"#666\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1\",\n                        \"style\": \"color:#666\",\n                        \"viewBox\": \"0 0 24 24\",\n                        \"width\": \"calc(2.5 * 16px)\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"height\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                        \"width\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"height\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                        \"width\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"summary\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n        ],\n        \"name\": \"details\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"Auto Mini\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"Auto Mini\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"button\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"dropdown-box\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"height\": \"calc(2.5 * 16px)\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"#666\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1\",\n                        \"style\": \"color:#666\",\n                        \"viewBox\": \"0 0 24 24\",\n                        \"width\": \"calc(2.5 * 16px)\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"height\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                        \"width\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"height\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                        \"width\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"summary\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"Auto Mini\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"button\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"Auto Mini\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"button\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #e00;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #c50000;\n          background-color: #c50000;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #f5a623;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #ab570a;\n          background-color: #ab570a;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"dropdown-box\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"height\": \"calc(2.5 * 16px)\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"#666\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1\",\n                          \"style\": \"color:#666\",\n                          \"viewBox\": \"0 0 24 24\",\n                          \"width\": \"calc(2.5 * 16px)\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"summary\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n          ],\n          \"name\": \"details\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"Auto Mini\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"button\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Button Dropdown should support types 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"btn-dropdown\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"Auto Mini\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"button\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"dropdown-box\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"height\": \"calc(2.5 * 16px)\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"#666\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1\",\n                          \"style\": \"color:#666\",\n                          \"viewBox\": \"0 0 24 24\",\n                          \"width\": \"calc(2.5 * 16px)\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"summary\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"details\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"btn-dropdown\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"btn-dropdown\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Secondary Action\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Secondary Action\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#fff\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#fff\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"dropdown-box\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"height\": \"calc(2.5 * 16px)\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"#fff\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1\",\n                                  \"style\": \"color:#fff\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                  \"width\": \"calc(2.5 * 16px)\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"summary\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"details\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#fff\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#fff\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#fff\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#fff\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Secondary Action\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Secondary Action\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#fff\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#fff\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"dropdown-box\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"height\": \"calc(2.5 * 16px)\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"#fff\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1\",\n                                  \"style\": \"color:#fff\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                  \"width\": \"calc(2.5 * 16px)\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"summary\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"details\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Secondary Action\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Secondary Action\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"btn-dropdown\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"Auto Mini\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"button\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"dropdown-box\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"height\": \"calc(2.5 * 16px)\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"#666\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1\",\n                          \"style\": \"color:#666\",\n                          \"viewBox\": \"0 0 24 24\",\n                          \"width\": \"calc(2.5 * 16px)\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"summary\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"details\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"btn-dropdown\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Secondary Action\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"Secondary Action\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#fff\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#fff\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#fff\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#fff\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#fff\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#fff\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#fff\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#fff\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Secondary Action\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Secondary Action\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#fff\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#fff\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#fff\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#fff\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Secondary Action\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Secondary Action\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"btn-dropdown\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"btn-dropdown\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"Secondary Action\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"Secondary Action\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"button\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#fff\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#fff\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#fff\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#fff\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"dropdown-box\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"height\": \"calc(2.5 * 16px)\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"#fff\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1\",\n                          \"style\": \"color:#fff\",\n                          \"viewBox\": \"0 0 24 24\",\n                          \"width\": \"calc(2.5 * 16px)\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"height\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                          \"width\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"summary\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#fff\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#fff\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"details\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Secondary Action\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"Secondary Action\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #fff;\n            background-color: #000;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #333;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #333;\n            background-color: #333;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#fff\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#fff\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#fff\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#fff\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Secondary Action\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #000;\n          color: #fff;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #333;\n          background-color: #333;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Secondary Action\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"btn-dropdown\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Auto Mini\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"dropdown-box\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"height\": \"calc(2.5 * 16px)\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"#666\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1\",\n                            \"style\": \"color:#666\",\n                            \"viewBox\": \"0 0 24 24\",\n                            \"width\": \"calc(2.5 * 16px)\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"height\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                            \"width\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"summary\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"details\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: calc(10.5 * 16px);\n            --geist-ui-dropdown-padding: 0 calc(1.375 * 16px) 0\n              calc(1.375 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"btn-dropdown\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Auto Mini\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"dropdown-box\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"height\": \"calc(2.5 * 16px)\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"#666\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1\",\n                                  \"style\": \"color:#666\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                  \"width\": \"calc(2.5 * 16px)\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"summary\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"details\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"dropdown-box\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"height\": \"calc(2.5 * 16px)\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"#666\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1\",\n                              \"style\": \"color:#666\",\n                              \"viewBox\": \"0 0 24 24\",\n                              \"width\": \"calc(2.5 * 16px)\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"height\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                              \"width\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"summary\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"details\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Auto Mini\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"button\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid #eaeaea;\n            border-radius: 6px;\n            --geist-ui-dropdown-height: calc(2.5 * 16px);\n            --geist-ui-dropdown-min-width: min-content;\n            --geist-ui-dropdown-padding: 0 calc(1.15 * 16px) 0\n              calc(1.15 * 16px);\n            --geist-ui-dropdown-font-size: calc(0.875 * 16px);\n          }\n\n          .btn-dropdown &gt; :global(button) {\n            border-top-left-radius: 6px;\n            border-bottom-left-radius: 6px;\n          }\n\n          details {\n            border-top-right-radius: 6px;\n            border-bottom-right-radius: 6px;\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: calc(2.5 * 16px);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: #666;\n            background-color: #fff;\n            height: calc(2.5 * 16px);\n            border-left: 1px solid #eaeaea;\n            cursor: pointer;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: #eaeaea;\n            background-color: #fafafa;\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            transform: translateY(8pt);\n            background-color: #fff;\n          }\n\n          .content &gt; :global(button:first-of-type) {\n            border-top-left-radius: 6px;\n            border-top-right-radius: 6px;\n          }\n\n          .content &gt; :global(button:last-of-type) {\n            border-bottom-left-radius: 6px;\n            border-bottom-right-radius: 6px;\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"dropdown-box\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"height\": \"calc(2.5 * 16px)\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"#666\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1\",\n                                \"style\": \"color:#666\",\n                                \"viewBox\": \"0 0 24 24\",\n                                \"width\": \"calc(2.5 * 16px)\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"height\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                                \"width\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"summary\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"dropdown-box\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"height\": \"calc(2.5 * 16px)\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"#666\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1\",\n                                  \"style\": \"color:#666\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                  \"width\": \"calc(2.5 * 16px)\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transform: scale(0.6);\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"height\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                  \"width\": undefined,\n                                },\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"summary\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"details\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Auto Mini\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: pointer;\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: #fff;\n          color: #666;\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"Auto Mini\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"button\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/button-dropdown/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { ButtonDropdown } from 'components'\nimport { mockNativeEvent, nativeEvent } from 'tests/utils'\nconst Icon: React.FC<any> = () => <svg />\n\ndescribe('Button Dropdown', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <ButtonDropdown>\n        <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n      </ButtonDropdown>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('right icon should render correctly', () => {\n    const wrapper = mount(\n      <ButtonDropdown icon={<Icon />}>\n        <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n      </ButtonDropdown>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support types', () => {\n    const wrapper = render(\n      <div>\n        <ButtonDropdown auto>\n          <ButtonDropdown.Item main>Auto Mini</ButtonDropdown.Item>\n        </ButtonDropdown>\n        <ButtonDropdown>\n          <ButtonDropdown.Item main>Auto Mini</ButtonDropdown.Item>\n        </ButtonDropdown>\n        <ButtonDropdown type=\"secondary\">\n          <ButtonDropdown.Item main>Secondary Action</ButtonDropdown.Item>\n        </ButtonDropdown>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should trigger callback function', () => {\n    const Wrapper = () => {\n      const [state, setState] = React.useState<string>('state1')\n\n      return (\n        <ButtonDropdown type=\"secondary\">\n          <ButtonDropdown.Item main onClick={() => setState('state2')}>\n            {state}\n          </ButtonDropdown.Item>\n        </ButtonDropdown>\n      )\n    }\n    const wrapper = mount(<Wrapper />)\n    expect(wrapper.text()).toContain('state1')\n    wrapper.find('button').simulate('click', nativeEvent)\n    expect(wrapper.text()).toContain('state2')\n  })\n\n  it('should work correctly when callback missing', () => {\n    const wrapper = mount(\n      <ButtonDropdown type=\"secondary\">\n        <ButtonDropdown.Item main></ButtonDropdown.Item>\n      </ButtonDropdown>,\n    )\n    wrapper.find('button').simulate('click', nativeEvent)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should ignore all events when loading', () => {\n    const Wrapper = () => {\n      const [state, setState] = React.useState<string>('state1')\n\n      return (\n        <ButtonDropdown type=\"secondary\" loading>\n          <ButtonDropdown.Item main onClick={() => setState('state2')}>\n            {state}\n          </ButtonDropdown.Item>\n        </ButtonDropdown>\n      )\n    }\n    const wrapper = mount(<Wrapper />)\n    wrapper.find('button').simulate('click', nativeEvent)\n    expect(wrapper.text()).not.toContain('state2')\n  })\n\n  it('should ignore all events when disabled', () => {\n    const Wrapper = () => {\n      const [state, setState] = React.useState<string>('state1')\n\n      return (\n        <ButtonDropdown type=\"secondary\" disabled>\n          <ButtonDropdown.Item main onClick={() => setState('state2')}>\n            {state}\n          </ButtonDropdown.Item>\n        </ButtonDropdown>\n      )\n    }\n    const wrapper = mount(<Wrapper />)\n    wrapper.find('summary').simulate('click', nativeEvent)\n    wrapper.find('button').simulate('click', nativeEvent)\n    expect(wrapper.text()).not.toContain('state2')\n  })\n\n  it('should render multiple types', () => {\n    const wrapper = render(\n      <ButtonDropdown auto>\n        <ButtonDropdown.Item main type=\"success\">\n          Auto Mini\n        </ButtonDropdown.Item>\n        <ButtonDropdown.Item type=\"warning\">Auto Mini</ButtonDropdown.Item>\n        <ButtonDropdown.Item type=\"error\">Auto Mini</ButtonDropdown.Item>\n      </ButtonDropdown>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should expand after click', () => {\n    const wrapper = mount(\n      <ButtonDropdown>\n        <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n      </ButtonDropdown>,\n    )\n\n    wrapper.find('summary').simulate('click', nativeEvent)\n    const open = wrapper.find('details').prop('open')\n    expect(open).toBeTruthy()\n  })\n\n  it('should stop propagation', () => {\n    let stopped = false\n    const nativeEvent = mockNativeEvent(() => (stopped = true))\n    const wrapper = mount(\n      <ButtonDropdown>\n        <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n        <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n      </ButtonDropdown>,\n    )\n\n    wrapper.find('summary').simulate('click', nativeEvent)\n    expect(stopped).toBeTruthy()\n  })\n})\n"
  },
  {
    "path": "components/button-dropdown/button-dropdown-context.ts",
    "content": "import React from 'react'\nimport { NormalTypes } from '../utils/prop-types'\n\nexport interface ButtonDropdownConfig {\n  type?: NormalTypes\n  auto?: boolean\n  disabled?: boolean\n  loading?: boolean\n}\n\nconst defaultContext = {\n  type: 'default' as NormalTypes,\n  auto: false,\n  disabled: false,\n  loading: false,\n}\n\nexport const ButtonDropdownContext = React.createContext<ButtonDropdownConfig>(\n  defaultContext,\n)\n\nexport const useButtonDropdown = (): ButtonDropdownConfig =>\n  React.useContext<ButtonDropdownConfig>(ButtonDropdownContext)\n"
  },
  {
    "path": "components/button-dropdown/button-dropdown-item.tsx",
    "content": "import React, { MouseEvent, useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { getColor } from './styles'\nimport { useButtonDropdown } from './button-dropdown-context'\nimport Loading from '../loading'\nimport { NormalTypes } from '../utils/prop-types'\n\nexport type ButtonDropdownItemTypes = NormalTypes\n\ninterface Props {\n  main?: boolean\n  type?: ButtonDropdownItemTypes\n  onClick?: React.MouseEventHandler<HTMLElement>\n  className?: string\n}\n\nconst defaultProps = {\n  main: false,\n  type: 'default' as ButtonDropdownItemTypes,\n  onClick: () => {},\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>\nexport type ButtonDropdownItemProps = Props & NativeAttrs\n\nconst ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>> = ({\n  children,\n  onClick,\n  className,\n  main,\n  type: selfType,\n  ...props\n}: ButtonDropdownItemProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { type: parentType, disabled, loading } = useButtonDropdown()\n  const type = main ? parentType : selfType\n  const colors = getColor(theme.palette, type, disabled)\n  const clickHandler = (event: MouseEvent<HTMLButtonElement>) => {\n    if (disabled || loading) return\n    onClick && onClick(event)\n  }\n\n  const cursor = useMemo(() => {\n    if (loading) return 'default'\n    return disabled ? 'not-allowed' : 'pointer'\n  }, [loading, disabled])\n\n  return (\n    <button className={className} onClick={clickHandler} {...props}>\n      {loading ? <Loading /> : children}\n      <style jsx>{`\n        button {\n          position: relative;\n          -webkit-appearance: button;\n          text-rendering: auto;\n          display: inline-flex;\n          flex: 1;\n          justify-content: center;\n          align-items: center;\n          vertical-align: middle;\n          text-align: center;\n          cursor: ${cursor};\n          box-sizing: border-box;\n          margin: 0;\n          border: none;\n          background-color: ${colors.bgColor};\n          color: ${colors.color};\n          width: 100%;\n          height: var(--geist-ui-dropdown-height);\n          min-width: var(--geist-ui-dropdown-min-width);\n          padding: var(--geist-ui-dropdown-padding);\n          font-size: var(--geist-ui-dropdown-font-size);\n        }\n\n        button:hover {\n          border-color: ${colors.hoverBorder};\n          background-color: ${colors.hoverBgColor};\n        }\n      `}</style>\n    </button>\n  )\n}\n\nButtonDropdownItem.defaultProps = defaultProps\nButtonDropdownItem.displayName = 'GeistButtonDropdownItem'\nexport default ButtonDropdownItem\n"
  },
  {
    "path": "components/button-dropdown/button-dropdown.tsx",
    "content": "import React, { MouseEvent, useCallback, useMemo, useRef, useState } from 'react'\nimport useTheme from '../use-theme'\nimport useClickAway from '../utils/use-click-away'\nimport { getColor } from './styles'\nimport ButtonDropdownIcon from './icon'\nimport ButtonDropdownItem from './button-dropdown-item'\nimport { ButtonDropdownContext } from './button-dropdown-context'\nimport { NormalTypes } from '../utils/prop-types'\nimport { pickChild, pickChildByProps } from '../utils/collections'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type ButtonDropdownTypes = NormalTypes\n\ninterface Props {\n  type?: ButtonDropdownTypes\n  auto?: boolean\n  loading?: boolean\n  disabled?: boolean\n  className?: string\n  icon?: React.ReactNode\n}\n\nconst defaultProps = {\n  type: 'default' as ButtonDropdownTypes,\n  auto: false,\n  loading: false,\n  disabled: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type ButtonDropdownProps = Props & NativeAttrs\n\nconst stopPropagation = (event: MouseEvent<HTMLElement>) => {\n  event.stopPropagation()\n  event.nativeEvent.stopImmediatePropagation()\n}\n\nconst ButtonDropdownComponent: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = ({\n  children,\n  type,\n  auto,\n  className,\n  disabled,\n  loading,\n  icon,\n  ...props\n}) => {\n  const { SCALES } = useScale()\n  const ref = useRef<HTMLDivElement>(null)\n  const theme = useTheme()\n  const colors = getColor(theme.palette, type)\n  const itemChildren = pickChild(children, ButtonDropdownItem)[1]\n  const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(\n    itemChildren,\n    'main',\n    true,\n  )\n  const [visible, setVisible] = useState<boolean>(false)\n  const clickHandler = useCallback(\n    (event: MouseEvent<HTMLDetailsElement>) => {\n      event.preventDefault()\n      stopPropagation(event)\n      if (disabled || loading) return\n      setVisible(!visible)\n    },\n    [visible],\n  )\n\n  const initialValue = {\n    type,\n    auto,\n    disabled,\n    loading,\n  }\n  const bgColor = useMemo(() => {\n    if (disabled || loading) return theme.palette.accents_1\n    return visible ? colors.hoverBgColor : colors.bgColor\n  }, [visible, colors, theme.palette])\n  const [paddingLeft, paddingRight] = [\n    auto ? SCALES.pl(1.15) : SCALES.pl(1.375),\n    auto ? SCALES.pr(1.15) : SCALES.pr(1.375),\n  ]\n\n  useClickAway(ref, () => setVisible(false))\n\n  return (\n    <ButtonDropdownContext.Provider value={initialValue}>\n      <div\n        ref={ref}\n        className={useClasses('btn-dropdown', className)}\n        onClick={stopPropagation}\n        {...props}>\n        {mainItemChildren}\n        <details open={visible}>\n          <summary onClick={clickHandler}>\n            <div className=\"dropdown-box\">\n              {icon ? (\n                <span\n                  className=\"dropdown-icon\"\n                  style={{\n                    color: colors.color,\n                    height: SCALES.height(2.5),\n                    width: SCALES.height(2.5),\n                  }}>\n                  {icon}\n                </span>\n              ) : (\n                <ButtonDropdownIcon color={colors.color} height={SCALES.height(2.5)} />\n              )}\n            </div>\n          </summary>\n          <div className=\"content\">{itemChildrenWithoutMain}</div>\n        </details>\n        <style jsx>{`\n          .btn-dropdown {\n            display: inline-flex;\n            position: relative;\n            box-sizing: border-box;\n            border: 1px solid ${theme.palette.border};\n            border-radius: ${theme.layout.radius};\n            --geist-ui-dropdown-height: ${SCALES.height(2.5)};\n            --geist-ui-dropdown-min-width: ${auto ? 'min-content' : SCALES.width(10.5)};\n            --geist-ui-dropdown-padding: ${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)}\n              ${paddingLeft};\n            --geist-ui-dropdown-font-size: ${SCALES.font(0.875)};\n          }\n\n          .btn-dropdown > :global(button) {\n            border-top-left-radius: ${theme.layout.radius};\n            border-bottom-left-radius: ${theme.layout.radius};\n          }\n\n          details {\n            border-top-right-radius: ${theme.layout.radius};\n            border-bottom-right-radius: ${theme.layout.radius};\n            overflow: hidden;\n          }\n\n          .dropdown-box {\n            height: ${SCALES.height(2.5)};\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n          }\n\n          summary {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n            list-style: none;\n            outline: none;\n            color: ${colors.color};\n            background-color: ${bgColor};\n            height: ${SCALES.height(2.5)};\n            border-left: 1px solid ${colors.borderLeftColor};\n            cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: auto;\n            padding: 0 1px;\n            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          }\n\n          summary:hover {\n            border-color: ${colors.hoverBorder};\n            background-color: ${colors.hoverBgColor};\n          }\n\n          .content {\n            position: absolute;\n            right: 0;\n            left: 0;\n            z-index: 90;\n            width: 100%;\n            border-radius: ${theme.layout.radius};\n            box-shadow: ${theme.expressiveness.shadowLarge};\n            transform: translateY(${theme.layout.gapHalf});\n            background-color: ${theme.palette.background};\n          }\n\n          .content > :global(button:first-of-type) {\n            border-top-left-radius: ${theme.layout.radius};\n            border-top-right-radius: ${theme.layout.radius};\n          }\n\n          .content > :global(button:last-of-type) {\n            border-bottom-left-radius: ${theme.layout.radius};\n            border-bottom-right-radius: ${theme.layout.radius};\n          }\n\n          .dropdown-icon {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transform: scale(0.6);\n          }\n        `}</style>\n      </div>\n    </ButtonDropdownContext.Provider>\n  )\n}\n\nButtonDropdownComponent.displayName = 'GeistButtonDropdown'\nButtonDropdownComponent.defaultProps = defaultProps\nconst ButtonDropdown = withScale(ButtonDropdownComponent)\nexport default ButtonDropdown\n"
  },
  {
    "path": "components/button-dropdown/icon.tsx",
    "content": "import React from 'react'\n\ninterface Props {\n  color?: string\n  height?: string\n}\n\nconst ButtonDropdownIcon: React.FC<Props> = ({ color, height }) => {\n  return (\n    <svg\n      stroke={color}\n      style={{ color }}\n      viewBox=\"0 0 24 24\"\n      width={height}\n      height={height}\n      strokeWidth=\"1\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\">\n      <path d=\"M6 9l6 6 6-6\" />\n\n      <style jsx>{`\n        svg {\n          transform: scale(0.6);\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nButtonDropdownIcon.displayName = 'GeistButtonDropdownIcon'\nexport default ButtonDropdownIcon\n"
  },
  {
    "path": "components/button-dropdown/index.ts",
    "content": "import ButtonDropdown from './button-dropdown'\nimport ButtonDropdownItem from './button-dropdown-item'\n\ntype ButtonDropdownType = typeof ButtonDropdown & {\n  Item: typeof ButtonDropdownItem\n}\n;(ButtonDropdown as ButtonDropdownType).Item = ButtonDropdownItem\n\nexport type { ButtonDropdownProps, ButtonDropdownTypes } from './button-dropdown'\nexport type {\n  ButtonDropdownItemProps,\n  ButtonDropdownItemTypes,\n} from './button-dropdown-item'\nexport default ButtonDropdown as ButtonDropdownType\n"
  },
  {
    "path": "components/button-dropdown/styles.ts",
    "content": "import { GeistUIThemesPalette } from '../themes/presets'\nimport { NormalTypes } from '../utils/prop-types'\n\ntype ButtonDropdownColors = {\n  color: string\n  bgColor: string\n  hoverBgColor: string\n  hoverBorder: string\n  borderLeftColor: string\n}\n\nexport const getColor = (\n  palette: GeistUIThemesPalette,\n  type: NormalTypes | undefined,\n  disabled: boolean = false,\n) => {\n  const colors: { [key in NormalTypes]: ButtonDropdownColors } = {\n    default: {\n      color: palette.accents_5,\n      bgColor: palette.background,\n      borderLeftColor: palette.accents_2,\n      hoverBgColor: palette.accents_1,\n      hoverBorder: palette.accents_2,\n    },\n    secondary: {\n      color: palette.background,\n      bgColor: palette.foreground,\n      borderLeftColor: palette.accents_7,\n      hoverBgColor: palette.accents_7,\n      hoverBorder: palette.accents_7,\n    },\n    success: {\n      color: palette.background,\n      bgColor: palette.success,\n      borderLeftColor: palette.successDark,\n      hoverBgColor: palette.successDark,\n      hoverBorder: palette.successDark,\n    },\n    warning: {\n      color: palette.background,\n      bgColor: palette.warning,\n      borderLeftColor: palette.warningDark,\n      hoverBgColor: palette.warningDark,\n      hoverBorder: palette.warningDark,\n    },\n    error: {\n      color: palette.background,\n      bgColor: palette.error,\n      borderLeftColor: palette.errorDark,\n      hoverBgColor: palette.errorDark,\n      hoverBorder: palette.errorDark,\n    },\n  }\n\n  if (disabled)\n    return {\n      ...colors.default,\n      bgColor: palette.accents_1,\n      color: palette.accents_4,\n    }\n  return type ? colors[type] : colors.default\n}\n"
  },
  {
    "path": "components/button-group/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ButtonGroup buttons should be displayed vertically 1`] = `\n\"<div class=\\\\\"btn-group vertical\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><div class=\\\\\"text\\\\\">action1</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: min-content;\n            width: auto;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.15 * 16px) 0 calc(1.15 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button><button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><div class=\\\\\"text\\\\\">action2</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: min-content;\n            width: auto;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.15 * 16px) 0 calc(1.15 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button><style>\n          .btn-group {\n            display: inline-flex;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            background-color: transparent;\n            overflow: hidden;\n            width: auto;\n            height: min-content;\n            margin: calc(0.313 * 16px) calc(0.313 * 16px) calc(0.313 * 16px)\n              calc(0.313 * 16px);\n            padding: 0 0 0 0;\n          }\n          .vertical {\n            flex-direction: column;\n          }\n          .btn-group :global(.btn) {\n            border: none;\n          }\n          .btn-group :global(.btn .text) {\n            top: 0;\n          }\n          .horizontal :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-left: 1px solid #eaeaea;\n          }\n          .horizontal :global(.btn:not(:last-child)) {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .vertical :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n            border-top: 1px solid #eaeaea;\n          }\n          .vertical :global(.btn:not(:last-child)) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n        </style></div>\"\n`;\n\nexports[`ButtonGroup props should be passed to each button 1`] = `\n\"<div class=\\\\\"btn-group horizontal\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><div class=\\\\\"text\\\\\">action</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #fff;\n            background-color: #0070f3;\n            border: 1px solid #0070f3;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #fff;\n            --geist-ui-button-bg: #0070f3;\n            min-width: min-content;\n            width: auto;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.15 * 16px) 0 calc(1.15 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #0070f3;\n            --geist-ui-button-color: #0070f3;\n            background-color: #fff;\n            border-color: #0070f3;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button><style>\n          .btn-group {\n            display: inline-flex;\n            border-radius: 6px;\n            border: 1px solid #fff;\n            background-color: transparent;\n            overflow: hidden;\n            width: auto;\n            height: min-content;\n            margin: calc(0.313 * 16px) calc(0.313 * 16px) calc(0.313 * 16px)\n              calc(0.313 * 16px);\n            padding: 0 0 0 0;\n          }\n          .vertical {\n            flex-direction: column;\n          }\n          .btn-group :global(.btn) {\n            border: none;\n          }\n          .btn-group :global(.btn .text) {\n            top: 0;\n          }\n          .horizontal :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-left: 1px solid #fff;\n          }\n          .horizontal :global(.btn:not(:last-child)) {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .vertical :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n            border-top: 1px solid #fff;\n          }\n          .vertical :global(.btn:not(:last-child)) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n        </style></div>\"\n`;\n\nexports[`ButtonGroup props should be passed to each button 2`] = `\n\"<div class=\\\\\"btn-group horizontal\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><div class=\\\\\"text\\\\\">action</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #fff;\n            background-color: #0070f3;\n            border: 1px solid #0070f3;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #fff;\n            --geist-ui-button-bg: #0070f3;\n            min-width: min-content;\n            width: auto;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.15 * 16px) 0 calc(1.15 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #0070f3;\n            --geist-ui-button-color: #0070f3;\n            background-color: #fff;\n            border-color: #0070f3;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button><style>\n          .btn-group {\n            display: inline-flex;\n            border-radius: 6px;\n            border: 1px solid #0070f3;\n            background-color: transparent;\n            overflow: hidden;\n            width: auto;\n            height: min-content;\n            margin: calc(0.313 * 16px) calc(0.313 * 16px) calc(0.313 * 16px)\n              calc(0.313 * 16px);\n            padding: 0 0 0 0;\n          }\n          .vertical {\n            flex-direction: column;\n          }\n          .btn-group :global(.btn) {\n            border: none;\n          }\n          .btn-group :global(.btn .text) {\n            top: 0;\n          }\n          .horizontal :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-left: 1px solid #0070f3;\n          }\n          .horizontal :global(.btn:not(:last-child)) {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .vertical :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n            border-top: 1px solid #0070f3;\n          }\n          .vertical :global(.btn:not(:last-child)) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n        </style></div>\"\n`;\n\nexports[`ButtonGroup should render correctly 1`] = `\n\"<div class=\\\\\"btn-group horizontal\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><div class=\\\\\"text\\\\\">action</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: min-content;\n            width: auto;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.15 * 16px) 0 calc(1.15 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button><style>\n          .btn-group {\n            display: inline-flex;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            background-color: transparent;\n            overflow: hidden;\n            width: auto;\n            height: min-content;\n            margin: calc(0.313 * 16px) calc(0.313 * 16px) calc(0.313 * 16px)\n              calc(0.313 * 16px);\n            padding: 0 0 0 0;\n          }\n          .vertical {\n            flex-direction: column;\n          }\n          .btn-group :global(.btn) {\n            border: none;\n          }\n          .btn-group :global(.btn .text) {\n            top: 0;\n          }\n          .horizontal :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-left: 1px solid #eaeaea;\n          }\n          .horizontal :global(.btn:not(:last-child)) {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .vertical :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n            border-top: 1px solid #eaeaea;\n          }\n          .vertical :global(.btn:not(:last-child)) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n        </style></div>\"\n`;\n"
  },
  {
    "path": "components/button-group/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { ButtonGroup, Button } from 'components'\nimport { nativeEvent } from 'tests/utils'\n\ndescribe('ButtonGroup', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <ButtonGroup>\n        <Button>action</Button>\n      </ButtonGroup>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('props should be passed to each button', () => {\n    const wrapper = mount(\n      <ButtonGroup type=\"success\">\n        <Button>action</Button>\n      </ButtonGroup>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    wrapper.setProps({ ghost: true })\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should ignore events when group disabled', () => {\n    const handler = jest.fn()\n    const wrapper = mount(\n      <ButtonGroup>\n        <Button onClick={handler}>action</Button>\n      </ButtonGroup>,\n    )\n    wrapper.find('button').simulate('click', nativeEvent)\n    expect(handler).toHaveBeenCalledTimes(1)\n    wrapper.setProps({ disabled: true })\n    wrapper.find('button').simulate('click', nativeEvent)\n    expect(handler).toHaveBeenCalledTimes(1)\n  })\n\n  it('buttons should be displayed vertically', () => {\n    const wrapper = mount(\n      <ButtonGroup vertical>\n        <Button>action1</Button>\n        <Button>action2</Button>\n      </ButtonGroup>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/button-group/button-group-context.ts",
    "content": "import React from 'react'\nimport { ButtonTypes } from '../utils/prop-types'\n\nexport interface ButtonGroupConfig {\n  type?: ButtonTypes\n  ghost?: boolean\n  disabled?: boolean\n  isButtonGroup: boolean\n}\n\nconst defaultContext = {\n  isButtonGroup: false,\n  disabled: false,\n}\n\nexport const ButtonGroupContext = React.createContext<ButtonGroupConfig>(defaultContext)\n\nexport const useButtonGroupContext = (): ButtonGroupConfig =>\n  React.useContext<ButtonGroupConfig>(ButtonGroupContext)\n"
  },
  {
    "path": "components/button-group/button-group.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { ButtonTypes } from '../utils/prop-types'\nimport { ButtonGroupContext, ButtonGroupConfig } from './button-group-context'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  disabled?: boolean\n  vertical?: boolean\n  ghost?: boolean\n  type?: ButtonTypes\n  className?: string\n}\n\nconst defaultProps = {\n  disabled: false,\n  vertical: false,\n  ghost: false,\n  type: 'default' as ButtonTypes,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type ButtonGroupProps = Props & NativeAttrs\n\nconst getGroupBorderColors = (\n  palette: GeistUIThemesPalette,\n  props: ButtonGroupProps & typeof defaultProps,\n): string => {\n  const { ghost, type } = props\n  if (!ghost && type !== 'default') return palette.background\n  const colors: { [key in ButtonTypes]?: string } = {\n    default: palette.border,\n    success: palette.success,\n    secondary: palette.secondary,\n    error: palette.error,\n    warning: palette.warning,\n  }\n  const withoutLightType = type.replace('-light', '') as ButtonTypes\n  return colors[withoutLightType] || (colors.default as string)\n}\n\nconst ButtonGroupComponent: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (\n  groupProps: ButtonGroupProps & typeof defaultProps,\n) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { disabled, type, ghost, vertical, children, className, ...props } = groupProps\n  const initialValue = useMemo<ButtonGroupConfig>(\n    () => ({\n      disabled,\n      type,\n      ghost,\n      isButtonGroup: true,\n    }),\n    [disabled, type],\n  )\n  const border = useMemo(() => {\n    return getGroupBorderColors(theme.palette, groupProps)\n  }, [theme, type, disabled, ghost])\n  const classes = useClasses(\n    'btn-group',\n    {\n      vertical: vertical,\n      horizontal: !vertical,\n    },\n    className,\n  )\n\n  return (\n    <ButtonGroupContext.Provider value={initialValue}>\n      <div className={classes} {...props}>\n        {children}\n        <style jsx>{`\n          .btn-group {\n            display: inline-flex;\n            border-radius: ${theme.layout.radius};\n            border: 1px solid ${border};\n            background-color: transparent;\n            overflow: hidden;\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, 'min-content')};\n            margin: ${SCALES.mt(0.313)} ${SCALES.mr(0.313)} ${SCALES.mb(0.313)}\n              ${SCALES.ml(0.313)};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          }\n          .vertical {\n            flex-direction: column;\n          }\n          .btn-group :global(.btn) {\n            border: none;\n          }\n          .btn-group :global(.btn .text) {\n            top: 0;\n          }\n          .horizontal :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n            border-left: 1px solid ${border};\n          }\n          .horizontal :global(.btn:not(:last-child)) {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .vertical :global(.btn:not(:first-child)) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n            border-top: 1px solid ${border};\n          }\n          .vertical :global(.btn:not(:last-child)) {\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n        `}</style>\n      </div>\n    </ButtonGroupContext.Provider>\n  )\n}\n\nButtonGroupComponent.defaultProps = defaultProps\nButtonGroupComponent.displayName = 'GeistButtonGroup'\nconst ButtonGroup = withScale(ButtonGroupComponent)\nexport default ButtonGroup\n"
  },
  {
    "path": "components/button-group/index.ts",
    "content": "import ButtonGroup from './button-group'\n\nexport type { ButtonGroupProps } from './button-group'\nexport type { ButtonTypes } from '../utils/prop-types'\nexport default ButtonGroup\n"
  },
  {
    "path": "components/capacity/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Capacity should override background color 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"capacity\",\n      \"title\": \"50%\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 50%;\n          background-color: white;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 50%;\n          background-color: white;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n      \"title\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n      \"title\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Capacity should render different widths based on limit-value 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"capacity\",\n          \"title\": \"20%\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 20%;\n          background-color: #50e3c2;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 20%;\n          background-color: #50e3c2;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"capacity\",\n            \"title\": \"40%\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 40%;\n          background-color: #f5a623;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 40%;\n          background-color: #f5a623;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"capacity\",\n              \"title\": \"66.67%\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 66.67%;\n          background-color: #c50000;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 66.67%;\n          background-color: #c50000;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"title\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"title\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"title\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"title\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"capacity\",\n          \"title\": \"40%\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 40%;\n          background-color: #f5a623;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 40%;\n          background-color: #f5a623;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"capacity\",\n            \"title\": \"66.67%\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 66.67%;\n          background-color: #c50000;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 66.67%;\n          background-color: #c50000;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"capacity\",\n            \"title\": \"20%\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 20%;\n          background-color: #50e3c2;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 20%;\n          background-color: #50e3c2;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"title\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"title\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"capacity\",\n          \"title\": \"66.67%\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 66.67%;\n          background-color: #c50000;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 66.67%;\n          background-color: #c50000;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"capacity\",\n            \"title\": \"40%\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 40%;\n          background-color: #f5a623;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 40%;\n          background-color: #f5a623;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"capacity\",\n              \"title\": \"20%\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 20%;\n          background-color: #50e3c2;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .capacity {\n          width: calc(3.125 * 16px);\n          height: calc(0.625 * 16px);\n          border-radius: 6px;\n          overflow: hidden;\n          background-color: #eaeaea;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        span {\n          width: 20%;\n          background-color: #50e3c2;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"title\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"title\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"title\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"title\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"title\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/capacity/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { render, mount } from 'enzyme'\nimport { Capacity } from 'components'\n\ndescribe('Capacity', () => {\n  it('should render value correctly', () => {\n    const wrapper = mount(<Capacity value={50} />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render title correctly', () => {\n    const wrapper = mount(<Capacity value={50} />)\n    const el = wrapper.find('.capacity').first()\n    const title = el.getDOMNode().getAttribute('title')\n    expect(title).toEqual('50%')\n  })\n\n  it('should render different widths based on limit-value', () => {\n    const wrapper = render(\n      <div>\n        <Capacity value={20} />\n        <Capacity value={20} limit={50} />\n        <Capacity value={20} limit={30} />\n      </div>,\n    )\n\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should override background color', () => {\n    const capacity = render(<Capacity value={50} color=\"white\" />)\n    expect(capacity).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "components/capacity/capacity.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { useProportions } from '../utils/calculations'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  value?: number\n  limit?: number\n  color?: string\n  className?: string\n}\n\nconst defaultProps = {\n  value: 0,\n  limit: 100,\n  color: '',\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CapacityProps = Props & NativeAttrs\n\nconst getColor = (val: number, palette: GeistUIThemesPalette): string => {\n  if (val < 33) return palette.cyan\n  if (val < 66) return palette.warning\n  return palette.errorDark\n}\n\nconst CapacityComponent: React.FC<CapacityProps> = ({\n  value,\n  limit,\n  color: userColor,\n  className,\n  ...props\n}: CapacityProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const percentValue = useProportions(value, limit)\n  const classes = useClasses('capacity', className)\n  const color = useMemo(() => {\n    if (userColor && userColor !== '') return userColor\n    return getColor(percentValue, theme.palette)\n  }, [userColor, percentValue, theme.palette])\n\n  return (\n    <div className={classes} title={`${percentValue}%`} {...props}>\n      <span />\n      <style jsx>{`\n        .capacity {\n          width: ${SCALES.width(3.125)};\n          height: ${SCALES.height(0.625)};\n          border-radius: ${theme.layout.radius};\n          overflow: hidden;\n          background-color: ${theme.palette.accents_2};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        span {\n          width: ${percentValue}%;\n          background-color: ${color};\n          height: 100%;\n          margin: 0;\n          padding: 0;\n          display: block;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nCapacityComponent.defaultProps = defaultProps\nCapacityComponent.displayName = 'GeistCapacity'\nconst Capacity = withScale(CapacityComponent)\nexport default Capacity\n"
  },
  {
    "path": "components/capacity/index.ts",
    "content": "import Capacity from './capacity'\n\nexport type { CapacityProps } from './capacity'\nexport default Capacity\n"
  },
  {
    "path": "components/card/__tests__/__snapshots__/footer.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Card Footer should render correctly 1`] = `\n\"<div class=\\\\\"card\\\\\"><div class=\\\\\"content\\\\\"><p>card</p><style>\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content > :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content > :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      </style></div><footer class=\\\\\"auto-margin\\\\\">footer<style>\n        footer {\n          padding: calc(0.66 * 16px) calc(1.31 * 16px);\n          display: flex;\n          align-items: center;\n          overflow: hidden;\n          color: inherit;\n          background-color: inherit;\n          font-size: calc(0.875 * 16px);\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          min-height: calc(3.3 * 16px);\n          width: auto;\n          height: auto;\n          margin: 0 0 0 0;\n        }\n\n        .auto-margin :global(*) {\n          margin-top: 0;\n          margin-bottom: 0;\n          margin-right: 4pt;\n        }\n      </style></footer><style>\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      </style></div>\"\n`;\n\nexports[`Card Footer should work with disable-auto-margin 1`] = `\n\"<footer class=\\\\\"\\\\\">footer<style>\n        footer {\n          padding: calc(0.66 * 16px) calc(1.31 * 16px);\n          display: flex;\n          align-items: center;\n          overflow: hidden;\n          color: inherit;\n          background-color: inherit;\n          font-size: calc(0.875 * 16px);\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          min-height: calc(3.3 * 16px);\n          width: auto;\n          height: auto;\n          margin: 0 0 0 0;\n        }\n\n        .auto-margin :global(*) {\n          margin-top: 0;\n          margin-bottom: 0;\n          margin-right: 4pt;\n        }\n      </style></footer>\"\n`;\n"
  },
  {
    "path": "components/card/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Card should render correctly when nested 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"card\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"content\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"card\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"card\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"card\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"data\": \"card\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"card\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"data\": \"card\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"card\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"card\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"data\": \"card\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"card\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"card\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"data\": \"card\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"card\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"card\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"card\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"card\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"data\": \"card\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"card\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"card\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"class\": \"card\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"class\": \"content\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"card\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"data\": \"card\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"div\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"class\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"class\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"content\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"card\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"card\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"card\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"data\": \"card\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"card\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"card\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"class\": \"card\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"class\": \"content\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"card\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"data\": \"card\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"div\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"class\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"class\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"card\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"card\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"card\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"data\": \"card\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"class\": \"card\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"class\": \"content\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"card\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"data\": \"card\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"div\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"class\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"class\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"card\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"class\": \"content\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"card\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"data\": \"card\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"div\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"class\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"class\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"class\": \"content\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"card\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"data\": \"card\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"div\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"class\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"class\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"class\": \"card\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"class\": \"content\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"card\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"data\": \"card\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"div\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"class\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"class\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: none;\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"class\": \"content\",\n                                  },\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"card\",\n                                      \"next\": Node {\n                                        \"attribs\": Object {},\n                                        \"children\": Array [\n                                          Node {\n                                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                            \"next\": null,\n                                            \"parent\": [Circular],\n                                            \"prev\": null,\n                                            \"type\": \"text\",\n                                          },\n                                        ],\n                                        \"name\": \"style\",\n                                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": [Circular],\n                                        \"type\": \"style\",\n                                        \"x-attribsNamespace\": Object {},\n                                        \"x-attribsPrefix\": Object {},\n                                      },\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                    Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": Node {\n                                        \"data\": \"card\",\n                                        \"next\": [Circular],\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                  ],\n                                  \"name\": \"div\",\n                                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"class\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"class\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Card should support shadow and hoverable 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"card\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"content\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"card\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"card\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"card\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"card\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"card\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"card\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"card\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"card\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"card\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"card\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"card\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"card\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"card\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"card\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"card\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"content\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"card\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"card\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"card\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"card\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"card\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"card\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"card\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"card\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"card\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"card\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"card\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"card\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"card\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"card\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"card\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"content\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"card\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"card\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"card\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"card\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"card\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"card\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"card\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid transparent;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"card\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"card\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"card\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"card\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"card\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .card {\n          background: #fff;\n          transition: all 0.2s ease;\n          border-radius: 6px;\n          box-shadow: none;\n          box-sizing: border-box;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .card:hover {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"card\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1 * 16px) calc(1 * 16px) calc(1 * 16px) calc(1 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .content &gt; :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"card\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/card/__tests__/footer.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Card } from 'components'\n\ndescribe('Card Footer', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Card>\n        <p>card</p>\n        <Card.Footer>footer</Card.Footer>\n      </Card>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work properly when use alone', () => {\n    const wrapper = mount(<Card.Footer>footer</Card.Footer>)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with disable-auto-margin', () => {\n    const wrapper = mount(<Card.Footer disableAutoMargin>footer</Card.Footer>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/card/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Card } from 'components'\n\ndescribe('Card', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Card>card</Card>)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support shadow and hoverable', () => {\n    const wrapper = render(\n      <div>\n        <Card hoverable>card</Card>\n        <Card shadow>card</Card>\n        <Card shadow hoverable>\n          card\n        </Card>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should support card types', () => {\n    const wrapper = mount(\n      <div>\n        <Card type=\"secondary\">card</Card>\n        <Card type=\"success\">card</Card>\n        <Card type=\"violet\">card</Card>\n        <Card type=\"lite\">card</Card>\n        <Card type=\"cyan\">card</Card>\n        <Card type=\"secondary\">card</Card>\n        <Card type=\"warning\">card</Card>\n      </div>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render correctly when nested', () => {\n    const wrapper = render(\n      <Card>\n        <Card shadow>\n          <Card>card</Card>\n        </Card>\n      </Card>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('the component Card.Content should be injected automatically', () => {\n    const card = mount(<Card>test-value</Card>)\n    const content = mount(\n      <Card>\n        <Card.Content>test-value</Card.Content>\n      </Card>,\n    )\n    expect(card.html()).toEqual(content.html())\n  })\n})\n"
  },
  {
    "path": "components/card/card-content.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CardContentProps = Props & NativeAttrs\n\nconst CardContentComponent: React.FC<React.PropsWithChildren<CardContentProps>> = ({\n  className,\n  children,\n  ...props\n}: CardContentProps & typeof defaultProps) => {\n  const { SCALES } = useScale()\n\n  return (\n    <div className={useClasses('content', className)} {...props}>\n      {children}\n      <style jsx>{`\n        .content {\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(1)} ${SCALES.pr(1)} ${SCALES.pb(1)} ${SCALES.pl(1)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .content > :global(p:first-child) {\n          margin-top: 0;\n        }\n\n        .content > :global(p:last-child) {\n          margin-bottom: 0;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nCardContentComponent.defaultProps = defaultProps\nCardContentComponent.displayName = 'GeistCardContent'\nconst CardContent = withScale(CardContentComponent)\nexport default CardContent\n"
  },
  {
    "path": "components/card/card-footer.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  disableAutoMargin?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  disableAutoMargin: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CardFooterProps = Props & NativeAttrs\n\nconst CardFooterComponent: React.FC<React.PropsWithChildren<CardFooterProps>> = ({\n  children,\n  className,\n  disableAutoMargin,\n  ...props\n}: CardFooterProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const classes = useClasses({ 'auto-margin': !disableAutoMargin }, className)\n\n  return (\n    <footer className={classes} {...props}>\n      {children}\n      <style jsx>{`\n        footer {\n          padding: ${SCALES.py(0.66)} ${SCALES.px(1.31)};\n          display: flex;\n          align-items: center;\n          overflow: hidden;\n          color: inherit;\n          background-color: inherit;\n          font-size: ${SCALES.font(0.875)};\n          border-top: 1px solid ${theme.palette.border};\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n          min-height: ${SCALES.height(3.3)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .auto-margin :global(*) {\n          margin-top: 0;\n          margin-bottom: 0;\n          margin-right: ${theme.layout.gapQuarter};\n        }\n      `}</style>\n    </footer>\n  )\n}\n\nCardFooterComponent.defaultProps = defaultProps\nCardFooterComponent.displayName = 'GeistCardFooter'\nconst CardFooter = withScale(CardFooterComponent)\nexport default CardFooter\n"
  },
  {
    "path": "components/card/card.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { CardTypes } from '../utils/prop-types'\nimport { getStyles } from './styles'\nimport CardFooter from './card-footer'\nimport CardContent from './card-content'\nimport Image from '../image'\nimport { hasChild, pickChild } from '../utils/collections'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  hoverable?: boolean\n  shadow?: boolean\n  className?: string\n  type?: CardTypes\n}\n\nconst defaultProps = {\n  type: 'default' as CardTypes,\n  hoverable: false,\n  shadow: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CardProps = Props & NativeAttrs\n\nconst CardComponent: React.FC<React.PropsWithChildren<CardProps>> = ({\n  children,\n  hoverable,\n  className,\n  shadow,\n  type,\n  ...props\n}: CardProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const hoverShadow = useMemo(() => {\n    if (shadow) return theme.expressiveness.shadowMedium\n    return hoverable ? theme.expressiveness.shadowSmall : 'none'\n  }, [hoverable, shadow, theme.expressiveness])\n  const { color, bgColor, borderColor } = useMemo(\n    () => getStyles(type, theme.palette, shadow),\n    [type, theme.palette, shadow],\n  )\n\n  const [withoutFooterChildren, footerChildren] = pickChild(children, CardFooter)\n  const [withoutImageChildren, imageChildren] = pickChild(withoutFooterChildren, Image)\n  const hasContent = hasChild(withoutImageChildren, CardContent)\n\n  return (\n    <div className={useClasses('card', className)} {...props}>\n      {imageChildren}\n      {hasContent ? (\n        withoutImageChildren\n      ) : (\n        <CardContent>{withoutImageChildren}</CardContent>\n      )}\n      {footerChildren}\n      <style jsx>{`\n        .card {\n          background: ${theme.palette.background};\n          transition: all 0.2s ease;\n          border-radius: ${theme.layout.radius};\n          box-shadow: ${shadow ? theme.expressiveness.shadowSmall : 'none'};\n          box-sizing: border-box;\n          color: ${color};\n          background-color: ${bgColor};\n          border: 1px solid ${borderColor};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .card:hover {\n          box-shadow: ${hoverShadow};\n        }\n\n        .card :global(img) {\n          width: 100%;\n        }\n\n        .card :global(.image) {\n          border-bottom-left-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nCardComponent.defaultProps = defaultProps\nCardComponent.displayName = 'GeistCard'\nconst Card = withScale(CardComponent)\nexport default Card\n"
  },
  {
    "path": "components/card/index.ts",
    "content": "import Card from './card'\nimport CardFooter from './card-footer'\nimport CardContent from './card-content'\n\nexport type CardComponentType = typeof Card & {\n  Footer: typeof CardFooter\n  Actions: typeof CardFooter\n  Content: typeof CardContent\n  Body: typeof CardContent\n}\n;(Card as CardComponentType).Footer = CardFooter\n;(Card as CardComponentType).Actions = CardFooter\n;(Card as CardComponentType).Content = CardContent\n;(Card as CardComponentType).Body = CardContent\n\nexport type { CardProps } from './card'\nexport type { CardContentProps } from './card-content'\nexport type { CardFooterProps } from './card-footer'\nexport type { CardTypes } from '../utils/prop-types'\nexport default Card as CardComponentType\n"
  },
  {
    "path": "components/card/styles.ts",
    "content": "import { CardTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\n\nexport type CardStyles = {\n  color: string\n  bgColor: string\n  borderColor: string\n}\n\nexport const getStyles = (\n  type: CardTypes,\n  palette: GeistUIThemesPalette,\n  isShadow?: boolean,\n): CardStyles => {\n  const colors: { [key in CardTypes]: Omit<CardStyles, 'borderColor'> } = {\n    default: {\n      color: palette.foreground,\n      bgColor: palette.background,\n    },\n    dark: {\n      color: palette.background,\n      bgColor: palette.foreground,\n    },\n    secondary: {\n      color: palette.background,\n      bgColor: palette.secondary,\n    },\n    success: {\n      color: palette.background,\n      bgColor: palette.success,\n    },\n    warning: {\n      color: palette.background,\n      bgColor: palette.warning,\n    },\n    error: {\n      color: palette.background,\n      bgColor: palette.error,\n    },\n    lite: {\n      color: palette.foreground,\n      bgColor: palette.background,\n    },\n    alert: {\n      color: 'white',\n      bgColor: palette.alert,\n    },\n    purple: {\n      color: 'white',\n      bgColor: palette.purple,\n    },\n    violet: {\n      color: 'white',\n      bgColor: palette.violet,\n    },\n    cyan: {\n      color: 'black',\n      bgColor: palette.cyan,\n    },\n  }\n  const showBorder = type === 'default' && !isShadow\n  return {\n    ...colors[type],\n    borderColor: showBorder ? palette.border : 'transparent',\n  }\n}\n"
  },
  {
    "path": "components/checkbox/__tests__/__snapshots__/group.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Checkbox Group should render correctly 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"group\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"checkbox\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"fill\": \"none\",\n              \"viewBox\": \"0 0 12 12\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                  \"stroke\": \"#666\",\n                },\n                \"children\": Array [],\n                \"name\": \"path\",\n                \"namespace\": \"http://www.w3.org/2000/svg\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"d\": undefined,\n                  \"stroke\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"d\": undefined,\n                  \"stroke\": undefined,\n                },\n              },\n            ],\n            \"name\": \"svg\",\n            \"namespace\": \"http://www.w3.org/2000/svg\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"type\": \"checkbox\",\n                },\n                \"children\": Array [],\n                \"name\": \"input\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"text\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Sydney\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"type\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"type\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"fill\": undefined,\n              \"viewBox\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"fill\": undefined,\n              \"viewBox\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"type\": \"checkbox\",\n              },\n              \"children\": Array [],\n              \"name\": \"input\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Sydney\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"type\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"type\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"fill\": \"none\",\n                \"viewBox\": \"0 0 12 12\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                    \"stroke\": \"#666\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"path\",\n                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"d\": undefined,\n                    \"stroke\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"d\": undefined,\n                    \"stroke\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"svg\",\n              \"namespace\": \"http://www.w3.org/2000/svg\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"fill\": undefined,\n                \"viewBox\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"fill\": undefined,\n                \"viewBox\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {\n              \"type\": \"checkbox\",\n            },\n            \"children\": Array [],\n            \"name\": \"input\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"text\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Sydney\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"fill\": \"none\",\n                  \"viewBox\": \"0 0 12 12\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                      \"stroke\": \"#666\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"path\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"d\": undefined,\n                      \"stroke\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"d\": undefined,\n                      \"stroke\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"svg\",\n                \"namespace\": \"http://www.w3.org/2000/svg\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"fill\": undefined,\n                  \"viewBox\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"fill\": undefined,\n                  \"viewBox\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"type\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"type\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"text\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"Sydney\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"type\": \"checkbox\",\n              },\n              \"children\": Array [],\n              \"name\": \"input\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"fill\": \"none\",\n                    \"viewBox\": \"0 0 12 12\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                        \"stroke\": \"#666\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"path\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"d\": undefined,\n                        \"stroke\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"d\": undefined,\n                        \"stroke\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"svg\",\n                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"fill\": undefined,\n                    \"viewBox\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"fill\": undefined,\n                    \"viewBox\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"type\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"type\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"text\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Sydney\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"type\": \"checkbox\",\n                },\n                \"children\": Array [],\n                \"name\": \"input\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"viewBox\": \"0 0 12 12\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                          \"stroke\": \"#666\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                          \"stroke\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                          \"stroke\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"type\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"type\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"label\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          .group {\n            width: auto;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n          .group :global(label) {\n            margin-right: calc(calc(1 * 16px) * 2);\n            --checkbox-size: calc(1 * 16px);\n          }\n          .group :global(label:last-of-type) {\n            margin-right: 0;\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n          .group {\n            width: auto;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n          .group :global(label) {\n            margin-right: calc(calc(1 * 16px) * 2);\n            --checkbox-size: calc(1 * 16px);\n          }\n          .group :global(label:last-of-type) {\n            margin-right: 0;\n          }\n        \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"checkbox\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"fill\": \"none\",\n                \"viewBox\": \"0 0 12 12\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                    \"stroke\": \"#666\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"path\",\n                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"d\": undefined,\n                    \"stroke\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"d\": undefined,\n                    \"stroke\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"svg\",\n              \"namespace\": \"http://www.w3.org/2000/svg\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"type\": \"checkbox\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"input\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"text\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"Sydney\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"type\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"type\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"fill\": undefined,\n                \"viewBox\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"fill\": undefined,\n                \"viewBox\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"type\": \"checkbox\",\n                },\n                \"children\": Array [],\n                \"name\": \"input\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"text\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"Sydney\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"type\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"type\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"fill\": \"none\",\n                  \"viewBox\": \"0 0 12 12\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                      \"stroke\": \"#666\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"path\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"d\": undefined,\n                      \"stroke\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"d\": undefined,\n                      \"stroke\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"svg\",\n                \"namespace\": \"http://www.w3.org/2000/svg\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"fill\": undefined,\n                  \"viewBox\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"fill\": undefined,\n                  \"viewBox\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {\n                \"type\": \"checkbox\",\n              },\n              \"children\": Array [],\n              \"name\": \"input\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Sydney\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"fill\": \"none\",\n                    \"viewBox\": \"0 0 12 12\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                        \"stroke\": \"#666\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"path\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"d\": undefined,\n                        \"stroke\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"d\": undefined,\n                        \"stroke\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"svg\",\n                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"fill\": undefined,\n                    \"viewBox\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"fill\": undefined,\n                    \"viewBox\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"type\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"type\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"text\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Sydney\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"type\": \"checkbox\",\n                },\n                \"children\": Array [],\n                \"name\": \"input\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"viewBox\": \"0 0 12 12\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                          \"stroke\": \"#666\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                          \"stroke\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                          \"stroke\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"type\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"type\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Sydney\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"type\": \"checkbox\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"input\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"viewBox\": \"0 0 12 12\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                            \"stroke\": \"#666\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                            \"stroke\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                            \"stroke\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"type\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"type\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"label\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/checkbox/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Checkbox should render correctly 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"checkbox\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"fill\": \"none\",\n          \"viewBox\": \"0 0 12 12\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n              \"stroke\": \"#666\",\n            },\n            \"children\": Array [],\n            \"name\": \"path\",\n            \"namespace\": \"http://www.w3.org/2000/svg\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"d\": undefined,\n              \"stroke\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"d\": undefined,\n              \"stroke\": undefined,\n            },\n          },\n        ],\n        \"name\": \"svg\",\n        \"namespace\": \"http://www.w3.org/2000/svg\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"type\": \"checkbox\",\n            },\n            \"children\": Array [],\n            \"name\": \"input\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"text\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"Sydney\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"type\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"type\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"fill\": undefined,\n          \"viewBox\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"fill\": undefined,\n          \"viewBox\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"type\": \"checkbox\",\n          },\n          \"children\": Array [],\n          \"name\": \"input\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"text\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"Sydney\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"type\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"type\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"fill\": \"none\",\n            \"viewBox\": \"0 0 12 12\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                \"stroke\": \"#666\",\n              },\n              \"children\": Array [],\n              \"name\": \"path\",\n              \"namespace\": \"http://www.w3.org/2000/svg\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"d\": undefined,\n                \"stroke\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"d\": undefined,\n                \"stroke\": undefined,\n              },\n            },\n          ],\n          \"name\": \"svg\",\n          \"namespace\": \"http://www.w3.org/2000/svg\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"fill\": undefined,\n            \"viewBox\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"fill\": undefined,\n            \"viewBox\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n      Node {\n        \"attribs\": Object {\n          \"type\": \"checkbox\",\n        },\n        \"children\": Array [],\n        \"name\": \"input\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"text\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"Sydney\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"fill\": \"none\",\n              \"viewBox\": \"0 0 12 12\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                  \"stroke\": \"#666\",\n                },\n                \"children\": Array [],\n                \"name\": \"path\",\n                \"namespace\": \"http://www.w3.org/2000/svg\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"d\": undefined,\n                  \"stroke\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"d\": undefined,\n                  \"stroke\": undefined,\n                },\n              },\n            ],\n            \"name\": \"svg\",\n            \"namespace\": \"http://www.w3.org/2000/svg\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"fill\": undefined,\n              \"viewBox\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"fill\": undefined,\n              \"viewBox\": undefined,\n            },\n          },\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"type\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"type\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"text\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"Sydney\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"type\": \"checkbox\",\n          },\n          \"children\": Array [],\n          \"name\": \"input\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"fill\": \"none\",\n                \"viewBox\": \"0 0 12 12\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                    \"stroke\": \"#666\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"path\",\n                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"d\": undefined,\n                    \"stroke\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"d\": undefined,\n                    \"stroke\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"svg\",\n              \"namespace\": \"http://www.w3.org/2000/svg\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"fill\": undefined,\n                \"viewBox\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"fill\": undefined,\n                \"viewBox\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"type\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"type\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"text\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"Sydney\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"type\": \"checkbox\",\n            },\n            \"children\": Array [],\n            \"name\": \"input\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"fill\": \"none\",\n                  \"viewBox\": \"0 0 12 12\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"d\": \"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\",\n                      \"stroke\": \"#666\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"path\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"d\": undefined,\n                      \"stroke\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"d\": undefined,\n                      \"stroke\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"svg\",\n                \"namespace\": \"http://www.w3.org/2000/svg\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"fill\": undefined,\n                  \"viewBox\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"fill\": undefined,\n                  \"viewBox\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"type\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"type\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"label\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Checkbox should work with different status 1`] = `\n\"<div><label class=\\\\\"checkbox\\\\\"><svg viewBox=\\\\\"0 0 12 12\\\\\" fill=\\\\\"none\\\\\"><path d=\\\\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\\\\" stroke=\\\\\"#666\\\\\"></path></svg><style>\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      </style><input type=\\\\\"checkbox\\\\\"><span class=\\\\\"text\\\\\"></span><style>\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      </style></label><label class=\\\\\"checkbox\\\\\"><svg viewBox=\\\\\"0 0 12 12\\\\\" fill=\\\\\"none\\\\\"><path d=\\\\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\\\\" stroke=\\\\\"#666\\\\\"></path></svg><style>\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      </style><input type=\\\\\"checkbox\\\\\"><span class=\\\\\"text\\\\\"></span><style>\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      </style></label><label class=\\\\\"checkbox\\\\\"><svg viewBox=\\\\\"0 0 12 12\\\\\" fill=\\\\\"none\\\\\"><path d=\\\\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\\\\" stroke=\\\\\"#666\\\\\"></path></svg><style>\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      </style><input type=\\\\\"checkbox\\\\\"><span class=\\\\\"text\\\\\"></span><style>\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      </style></label><label class=\\\\\"checkbox\\\\\"><svg viewBox=\\\\\"0 0 12 12\\\\\" fill=\\\\\"none\\\\\"><path d=\\\\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\\\\" stroke=\\\\\"#666\\\\\"></path></svg><style>\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: 1;\n          cursor: pointer;\n        }\n      </style><input type=\\\\\"checkbox\\\\\"><span class=\\\\\"text\\\\\"></span><style>\n        .checkbox {\n          --checkbox-size: calc(0.875 * 16px);\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: pointer;\n          opacity: 1;\n          line-height: var(--checkbox-size);\n          width: auto;\n          height: var(--checkbox-size);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: pointer;\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      </style></label></div>\"\n`;\n"
  },
  {
    "path": "components/checkbox/__tests__/group.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Checkbox } from 'components'\n\ndescribe('Checkbox Group', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Checkbox.Group value={[]}>\n        <Checkbox value=\"sydney\">Sydney</Checkbox>\n      </Checkbox.Group>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n    const rendered = render(\n      <Checkbox.Group value={[]}>\n        <Checkbox value=\"sydney\">Sydney</Checkbox>\n      </Checkbox.Group>,\n    )\n    expect(rendered).toMatchSnapshot()\n  })\n\n  it('should work correctly with initial value', () => {\n    let wrapper = mount(\n      <Checkbox.Group value={['sydney']}>\n        <Checkbox value=\"sydney\">Sydney</Checkbox>\n        <Checkbox value=\"beijing\">BeiJing</Checkbox>\n      </Checkbox.Group>,\n    )\n    const sydney = wrapper.find('input').at(0).getDOMNode()\n    expect((sydney as HTMLInputElement).checked).toBeTruthy()\n    const beijing = wrapper.find('input').at(1).getDOMNode()\n    expect((beijing as HTMLInputElement).checked).not.toBeTruthy()\n  })\n\n  it('should change value after click', () => {\n    let value = ['sydney']\n    const wrapper = mount(\n      <Checkbox.Group value={['sydney']} onChange={val => (value = val)}>\n        <Checkbox value=\"sydney\">Sydney</Checkbox>\n        <Checkbox value=\"beijing\">BeiJing</Checkbox>\n      </Checkbox.Group>,\n    )\n    const sydney = wrapper.find('input').at(0)\n    sydney.simulate('change')\n    expect(value.length).toBe(0)\n\n    const beijing = wrapper.find('input').at(1)\n    beijing.simulate('change')\n    expect(value).toEqual(expect.arrayContaining(['beijing']))\n  })\n\n  it('should ignore events when disabled', () => {\n    let value = ['sydney']\n    const wrapper = mount(\n      <Checkbox.Group disabled value={['sydney']} onChange={val => (value = val)}>\n        <Checkbox value=\"sydney\">Sydney</Checkbox>\n        <Checkbox value=\"beijing\">BeiJing</Checkbox>\n      </Checkbox.Group>,\n    )\n    const sydney = wrapper.find('input').at(0)\n    sydney.simulate('change')\n    expect(value.length).not.toBe(0)\n\n    const beijing = wrapper.find('input').at(1)\n    beijing.simulate('change')\n    expect(value).not.toEqual(expect.arrayContaining(['beijing']))\n  })\n\n  it('should throw error when value missing', () => {\n    let errorMessage = ''\n    const Group = Checkbox.Group as any\n    const errorSpy = jest\n      .spyOn(console, 'error')\n      .mockImplementation(msg => (errorMessage = msg))\n    mount(\n      <Group>\n        <Checkbox value=\"sydney\">Sydney</Checkbox>\n        <Checkbox value=\"beijing\">BeiJing</Checkbox>\n      </Group>,\n    )\n\n    expect(errorMessage).toContain('required')\n    errorSpy.mockRestore()\n  })\n\n  it('should throw error when set check prop in group', () => {\n    let errorMessage = ''\n    const errorSpy = jest\n      .spyOn(console, 'error')\n      .mockImplementation(msg => (errorMessage = msg))\n    mount(\n      <Checkbox.Group value={[]}>\n        <Checkbox value=\"sydney\" checked>\n          Sydney\n        </Checkbox>\n        <Checkbox value=\"beijing\">BeiJing</Checkbox>\n      </Checkbox.Group>,\n    )\n\n    expect(errorMessage.toLowerCase()).toContain('remove props')\n    errorSpy.mockRestore()\n  })\n})\n"
  },
  {
    "path": "components/checkbox/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Checkbox } from 'components'\n\ndescribe('Checkbox', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)\n    expect(() => wrapper.unmount()).not.toThrow()\n    const rendered = render(<Checkbox>Sydney</Checkbox>)\n    expect(rendered).toMatchSnapshot()\n  })\n\n  it('should work with different status', () => {\n    const wrapper = mount(\n      <div>\n        <Checkbox type=\"secondary\" />\n        <Checkbox type=\"success\" />\n        <Checkbox type=\"warning\" />\n        <Checkbox type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('should work correctly with initial value', () => {\n    let wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)\n    let input = wrapper.find('input').getDOMNode()\n    expect((input as HTMLInputElement).checked).toBeTruthy()\n\n    wrapper = mount(<Checkbox checked={false}>Sydney</Checkbox>)\n    input = wrapper.find('input').getDOMNode()\n    expect((input as HTMLInputElement).checked).not.toBeTruthy()\n\n    wrapper = mount(<Checkbox initialChecked>Sydney</Checkbox>)\n    input = wrapper.find('input').getDOMNode()\n    expect((input as HTMLInputElement).checked).toBeTruthy()\n\n    wrapper = mount(<Checkbox initialChecked={false}>Sydney</Checkbox>)\n    input = wrapper.find('input').getDOMNode()\n    expect((input as HTMLInputElement).checked).not.toBeTruthy()\n  })\n\n  it('should change value after click', () => {\n    const Wrapper = () => {\n      const [state, setState] = React.useState<string>('state1')\n\n      return (\n        <Checkbox initialChecked onChange={() => setState('state2')}>\n          {state}\n        </Checkbox>\n      )\n    }\n    const wrapper = mount(<Wrapper />)\n    const input = wrapper.find('input').at(0)\n    input.simulate('change')\n    expect(wrapper.find('.text').text()).toContain('state2')\n  })\n\n  it('should ignore events when disabled', () => {\n    const Wrapper = () => {\n      const [state, setState] = React.useState<string>('state1')\n\n      return (\n        <Checkbox disabled onChange={() => setState('state2')}>\n          {state}\n        </Checkbox>\n      )\n    }\n    const wrapper = mount(<Wrapper />)\n    const input = wrapper.find('input').at(0)\n    input.simulate('change')\n    expect(wrapper.find('.text').text()).not.toContain('state2')\n  })\n})\n"
  },
  {
    "path": "components/checkbox/checkbox-context.ts",
    "content": "import React from 'react'\n\nexport interface CheckboxConfig {\n  updateState?: (value: string, checked: boolean) => void\n  disabledAll: boolean\n  values: string[]\n  inGroup: boolean\n}\n\nconst defaultContext = {\n  disabledAll: false,\n  inGroup: false,\n  values: [],\n}\n\nexport const CheckboxContext = React.createContext<CheckboxConfig>(defaultContext)\n\nexport const useCheckbox = (): CheckboxConfig =>\n  React.useContext<CheckboxConfig>(CheckboxContext)\n"
  },
  {
    "path": "components/checkbox/checkbox-group.tsx",
    "content": "import React, { useEffect, useMemo, useState } from 'react'\nimport { CheckboxContext } from './checkbox-context'\nimport useWarning from '../utils/use-warning'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  value: string[]\n  disabled?: boolean\n  onChange?: (values: string[]) => void\n  className?: string\n}\n\nconst defaultProps = {\n  disabled: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CheckboxGroupProps = Props & NativeAttrs\n\nconst CheckboxGroupComponent: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({\n  disabled,\n  onChange,\n  value,\n  children,\n  className,\n  ...props\n}: CheckboxGroupProps & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const [selfVal, setSelfVal] = useState<string[]>([])\n  const classes = useClasses('group', className)\n  if (!value) {\n    value = []\n    useWarning('Props \"value\" is required.', 'Checkbox Group')\n  }\n\n  const updateState = (val: string, checked: boolean) => {\n    const removed = selfVal.filter(v => v !== val)\n    const next = checked ? [...removed, val] : removed\n    setSelfVal(next)\n    onChange && onChange(next)\n  }\n\n  const providerValue = useMemo(() => {\n    return {\n      updateState,\n      disabledAll: disabled,\n      inGroup: true,\n      values: selfVal,\n    }\n  }, [disabled, selfVal])\n\n  useEffect(() => {\n    setSelfVal(value)\n  }, [value.join(',')])\n\n  return (\n    <CheckboxContext.Provider value={providerValue}>\n      <div className={classes} {...props}>\n        {children}\n        <style jsx>{`\n          .group {\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, 'auto')};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n          .group :global(label) {\n            margin-right: calc(${SCALES.font(1)} * 2);\n            --checkbox-size: ${SCALES.font(1)};\n          }\n          .group :global(label:last-of-type) {\n            margin-right: 0;\n          }\n        `}</style>\n      </div>\n    </CheckboxContext.Provider>\n  )\n}\n\nCheckboxGroupComponent.defaultProps = defaultProps\nCheckboxGroupComponent.displayName = 'GeistCheckboxGroup'\nconst CheckboxGroup = withScale(CheckboxGroupComponent)\n\nexport default CheckboxGroup\n"
  },
  {
    "path": "components/checkbox/checkbox.icon.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\n\ninterface Props {\n  disabled?: boolean\n  checked?: boolean\n  fill?: string\n  bg?: string\n}\n\nconst CheckboxIconComponent: React.FC<Props> = ({ fill, bg, disabled, checked }) => {\n  const theme = useTheme()\n\n  const { propsFill, propsBg } = useMemo(() => {\n    return {\n      propsFill: fill,\n      propsBg: bg,\n    }\n  }, [theme.palette])\n\n  return (\n    <>\n      {checked ? (\n        <svg viewBox=\"0 0 17 16\" fill=\"none\">\n          <path\n            d=\"M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z\"\n            fill={propsFill}\n          />\n          <path d=\"M16 3L7.72491 11L5 8\" stroke={propsBg} strokeWidth=\"1.5\" />\n        </svg>\n      ) : (\n        <svg viewBox=\"0 0 12 12\" fill=\"none\">\n          <path\n            d=\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\"\n            stroke={theme.palette.accents_5}\n          />\n        </svg>\n      )}\n      <style jsx>{`\n        svg {\n          display: inline-flex;\n          width: calc(0.86 * var(--checkbox-size));\n          height: calc(0.86 * var(--checkbox-size));\n          user-select: none;\n          opacity: ${disabled ? 0.4 : 1};\n          cursor: ${disabled ? 'not-allowed' : 'pointer'};\n        }\n      `}</style>\n    </>\n  )\n}\n\nCheckboxIconComponent.displayName = 'GeistCheckboxIcon'\nconst CheckboxIcon = React.memo(CheckboxIconComponent)\n\nexport default CheckboxIcon\n"
  },
  {
    "path": "components/checkbox/checkbox.tsx",
    "content": "import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useCheckbox } from './checkbox-context'\nimport CheckboxIcon from './checkbox.icon'\nimport useWarning from '../utils/use-warning'\nimport { NormalTypes } from '../utils/prop-types'\nimport { getColors } from './styles'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type CheckboxTypes = NormalTypes\nexport interface CheckboxEventTarget {\n  checked: boolean\n}\nexport interface CheckboxEvent {\n  target: CheckboxEventTarget\n  stopPropagation: () => void\n  preventDefault: () => void\n  nativeEvent: React.ChangeEvent\n}\n\ninterface Props {\n  checked?: boolean\n  disabled?: boolean\n  type?: CheckboxTypes\n  initialChecked?: boolean\n  onChange?: (e: CheckboxEvent) => void\n  className?: string\n  value?: string\n}\n\nconst defaultProps = {\n  disabled: false,\n  type: 'default' as CheckboxTypes,\n  initialChecked: false,\n  className: '',\n  value: '',\n}\n\ntype NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>\nexport type CheckboxProps = Props & NativeAttrs\n\nconst CheckboxComponent: React.FC<CheckboxProps> = ({\n  checked,\n  initialChecked,\n  disabled,\n  onChange,\n  className,\n  children,\n  type,\n  value,\n  ...props\n}: CheckboxProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const [selfChecked, setSelfChecked] = useState<boolean>(initialChecked)\n  const { updateState, inGroup, disabledAll, values } = useCheckbox()\n  const isDisabled = inGroup ? disabledAll || disabled : disabled\n  const classes = useClasses('checkbox', className)\n\n  if (inGroup && checked) {\n    useWarning(\n      'Remove props \"checked\" when [Checkbox] component is in the group.',\n      'Checkbox',\n    )\n  }\n  if (inGroup) {\n    useEffect(() => {\n      const next = values.includes(value)\n      if (next === selfChecked) return\n      setSelfChecked(next)\n    }, [values.join(',')])\n  }\n\n  const { fill, bg } = useMemo(\n    () => getColors(theme.palette, type),\n    [theme.palette, type],\n  )\n\n  const changeHandle = useCallback(\n    (ev: React.ChangeEvent) => {\n      if (isDisabled) return\n      const selfEvent: CheckboxEvent = {\n        target: {\n          checked: !selfChecked,\n        },\n        stopPropagation: ev.stopPropagation,\n        preventDefault: ev.preventDefault,\n        nativeEvent: ev,\n      }\n      if (inGroup && updateState) {\n        updateState && updateState(value, !selfChecked)\n      }\n\n      setSelfChecked(!selfChecked)\n      onChange && onChange(selfEvent)\n    },\n    [updateState, onChange, isDisabled, selfChecked],\n  )\n\n  useEffect(() => {\n    if (checked === undefined) return\n    setSelfChecked(checked)\n  }, [checked])\n\n  return (\n    <label className={classes}>\n      <CheckboxIcon fill={fill} bg={bg} disabled={isDisabled} checked={selfChecked} />\n      <input\n        type=\"checkbox\"\n        disabled={isDisabled}\n        checked={selfChecked}\n        onChange={changeHandle}\n        {...props}\n      />\n      <span className=\"text\">{children}</span>\n      <style jsx>{`\n        .checkbox {\n          --checkbox-size: ${SCALES.font(0.875)};\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          cursor: ${isDisabled ? 'not-allowed' : 'pointer'};\n          opacity: ${isDisabled ? 0.75 : 1};\n          line-height: var(--checkbox-size);\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'var(--checkbox-size)')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .text {\n          font-size: var(--checkbox-size);\n          line-height: var(--checkbox-size);\n          padding-left: calc(var(--checkbox-size) * 0.5);\n          user-select: none;\n          cursor: ${isDisabled ? 'not-allowed' : 'pointer'};\n        }\n\n        input {\n          opacity: 0;\n          outline: none;\n          position: absolute;\n          width: 0;\n          height: 0;\n          margin: 0;\n          padding: 0;\n          z-index: -1;\n          font-size: 0;\n          background-color: transparent;\n        }\n      `}</style>\n    </label>\n  )\n}\n\nCheckboxComponent.defaultProps = defaultProps\nCheckboxComponent.displayName = 'GeistCheckbox'\nconst Checkbox = withScale(CheckboxComponent)\nexport default Checkbox\n"
  },
  {
    "path": "components/checkbox/index.ts",
    "content": "import Checkbox from './checkbox'\nimport CheckboxGroup from './checkbox-group'\n\nexport type CheckboxComponentType = typeof Checkbox & {\n  Group: typeof CheckboxGroup\n}\n;(Checkbox as CheckboxComponentType).Group = CheckboxGroup\n\nexport type {\n  CheckboxProps,\n  CheckboxEvent,\n  CheckboxEventTarget,\n  CheckboxTypes,\n} from './checkbox'\nexport type { CheckboxGroupProps } from './checkbox-group'\nexport default Checkbox as CheckboxComponentType\n"
  },
  {
    "path": "components/checkbox/styles.ts",
    "content": "import { GeistUIThemesPalette } from '../themes/presets'\nimport { NormalTypes } from '../utils/prop-types'\n\nexport type CheckboxColor = {\n  fill: string\n  bg: string\n}\n\nexport const getColors = (\n  palette: GeistUIThemesPalette,\n  status?: NormalTypes,\n): CheckboxColor => {\n  const colors: { [key in NormalTypes]: CheckboxColor } = {\n    default: {\n      fill: palette.foreground,\n      bg: palette.background,\n    },\n    secondary: {\n      fill: palette.foreground,\n      bg: palette.background,\n    },\n    success: {\n      fill: palette.success, // fondo\n      bg: palette.background,\n    },\n    warning: {\n      fill: palette.warning,\n      bg: palette.background,\n    },\n    error: {\n      fill: palette.error,\n      bg: palette.background,\n    },\n  }\n\n  if (!status) return colors.default\n  return colors[status]\n}\n"
  },
  {
    "path": "components/code/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Code should repspond to changed by width 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"pre\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"code\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"pre\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .pre {\n          max-width: 100%;\n          border: 1px solid #fafafa;\n          font-size: calc(0.875 * 16px);\n          width: 50%;\n          height: auto;\n          margin: calc(1.3 * 16px) 0 calc(1.3 * 16px) 0;\n          border-radius: 6px;\n          background-color: rgba(250, 250, 250, 0.75);\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: calc(1.1 * 16px) calc(1 * 16px) calc(1.1 * 16px) calc(1 * 16px);\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: 6px;\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid #eaeaea;\n          background-color: #eaeaea;\n          color: #666;\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(0.8125 * 16px);\n          padding: calc(0.32 * 16px) calc(0.5 * 16px) calc(0.32 * 16px)\n            calc(0.5 * 16px);\n          width: auto;\n          border-top-left-radius: calc(6px - 1px);\n          border-bottom-right-radius: 6px;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .pre {\n          max-width: 100%;\n          border: 1px solid #fafafa;\n          font-size: calc(0.875 * 16px);\n          width: 50%;\n          height: auto;\n          margin: calc(1.3 * 16px) 0 calc(1.3 * 16px) 0;\n          border-radius: 6px;\n          background-color: rgba(250, 250, 250, 0.75);\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: calc(1.1 * 16px) calc(1 * 16px) calc(1.1 * 16px) calc(1 * 16px);\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: 6px;\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid #eaeaea;\n          background-color: #eaeaea;\n          color: #666;\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(0.8125 * 16px);\n          padding: calc(0.32 * 16px) calc(0.5 * 16px) calc(0.32 * 16px)\n            calc(0.5 * 16px);\n          width: auto;\n          border-top-left-radius: calc(6px - 1px);\n          border-bottom-right-radius: 6px;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"code\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"pre\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Code should support block mode 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"pre\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"code\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"pre\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .pre {\n          max-width: 100%;\n          border: 1px solid #fafafa;\n          font-size: calc(0.875 * 16px);\n          width: initial;\n          height: auto;\n          margin: calc(1.3 * 16px) 0 calc(1.3 * 16px) 0;\n          border-radius: 6px;\n          background-color: rgba(250, 250, 250, 0.75);\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: calc(1.1 * 16px) calc(1 * 16px) calc(1.1 * 16px) calc(1 * 16px);\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: 6px;\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid #eaeaea;\n          background-color: #eaeaea;\n          color: #666;\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(0.8125 * 16px);\n          padding: calc(0.32 * 16px) calc(0.5 * 16px) calc(0.32 * 16px)\n            calc(0.5 * 16px);\n          width: auto;\n          border-top-left-radius: calc(6px - 1px);\n          border-bottom-right-radius: 6px;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .pre {\n          max-width: 100%;\n          border: 1px solid #fafafa;\n          font-size: calc(0.875 * 16px);\n          width: initial;\n          height: auto;\n          margin: calc(1.3 * 16px) 0 calc(1.3 * 16px) 0;\n          border-radius: 6px;\n          background-color: rgba(250, 250, 250, 0.75);\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: calc(1.1 * 16px) calc(1 * 16px) calc(1.1 * 16px) calc(1 * 16px);\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: 6px;\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid #eaeaea;\n          background-color: #eaeaea;\n          color: #666;\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(0.8125 * 16px);\n          padding: calc(0.32 * 16px) calc(0.5 * 16px) calc(0.32 * 16px)\n            calc(0.5 * 16px);\n          width: auto;\n          border-top-left-radius: calc(6px - 1px);\n          border-bottom-right-radius: 6px;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"code\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"pre\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Code should work correctly with title 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"pre\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"name\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"name\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n        ],\n        \"name\": \"header\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"code\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"pre\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .pre {\n          max-width: 100%;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: initial;\n          height: auto;\n          margin: calc(1.3 * 16px) 0 calc(1.3 * 16px) 0;\n          border-radius: 6px;\n          background-color: #fff;\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: calc(1.1 * 16px) calc(1 * 16px) calc(1.1 * 16px) calc(1 * 16px);\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: 6px;\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid #eaeaea;\n          background-color: #eaeaea;\n          color: #666;\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(0.8125 * 16px);\n          padding: calc(0.32 * 16px) calc(0.5 * 16px) calc(0.32 * 16px)\n            calc(0.5 * 16px);\n          width: auto;\n          border-top-left-radius: calc(6px - 1px);\n          border-bottom-right-radius: 6px;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"code\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"pre\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .pre {\n          max-width: 100%;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: initial;\n          height: auto;\n          margin: calc(1.3 * 16px) 0 calc(1.3 * 16px) 0;\n          border-radius: 6px;\n          background-color: #fff;\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: calc(1.1 * 16px) calc(1 * 16px) calc(1.1 * 16px) calc(1 * 16px);\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: 6px;\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid #eaeaea;\n          background-color: #eaeaea;\n          color: #666;\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(0.8125 * 16px);\n          padding: calc(0.32 * 16px) calc(0.5 * 16px) calc(0.32 * 16px)\n            calc(0.5 * 16px);\n          width: auto;\n          border-top-left-radius: calc(6px - 1px);\n          border-bottom-right-radius: 6px;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"name\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"name\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n          ],\n          \"name\": \"header\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .pre {\n          max-width: 100%;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: initial;\n          height: auto;\n          margin: calc(1.3 * 16px) 0 calc(1.3 * 16px) 0;\n          border-radius: 6px;\n          background-color: #fff;\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: calc(1.1 * 16px) calc(1 * 16px) calc(1.1 * 16px) calc(1 * 16px);\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: 6px;\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid #eaeaea;\n          background-color: #eaeaea;\n          color: #666;\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(0.8125 * 16px);\n          padding: calc(0.32 * 16px) calc(0.5 * 16px) calc(0.32 * 16px)\n            calc(0.5 * 16px);\n          width: auto;\n          border-top-left-radius: calc(6px - 1px);\n          border-bottom-right-radius: 6px;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"code\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"pre\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"name\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"name\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"header\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/code/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Code } from 'components'\n\ndescribe('Code', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Code>code</Code>)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support block mode', () => {\n    const wrapper = render(<Code block>code</Code>)\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should repspond to changed by width', () => {\n    const wrapper = render(\n      <Code block width=\"50%\">\n        code\n      </Code>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should render pre element only in block mode', () => {\n    const wrapper = mount(<Code>code</Code>)\n    expect(wrapper.find('pre').length).toBe(0)\n    wrapper.setProps({ block: true })\n    expect(wrapper.find('pre').length).not.toBe(0)\n  })\n\n  it('should work correctly with title', () => {\n    const wrapper = render(\n      <Code block name=\"name\" classic>\n        code\n      </Code>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "components/code/code.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useScale, { withScale } from '../use-scale'\nimport useTheme from '../use-theme'\nimport { addColorAlpha } from '../utils/color'\n\ninterface Props {\n  block?: boolean\n  className?: string\n  name?: string\n  classic?: boolean\n}\n\nconst defaultProps = {\n  block: false,\n  className: '',\n  name: '',\n  classic: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CodeProps = Props & NativeAttrs\n\nconst CodeComponent: React.FC<React.PropsWithChildren<CodeProps>> = ({\n  children,\n  block,\n  className,\n  name,\n  classic,\n  ...props\n}: React.PropsWithChildren<CodeProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const theme = useTheme()\n  const { background, border } = useMemo(() => {\n    if (!classic)\n      return {\n        border: theme.palette.accents_1,\n        background: addColorAlpha(theme.palette.accents_1, 0.75),\n      }\n    return {\n      border: theme.palette.accents_2,\n      background: theme.palette.background,\n    }\n  }, [classic, theme.palette])\n\n  if (!block) return <code {...props}>{children}</code>\n\n  return (\n    <div className=\"pre\">\n      {name && (\n        <header>\n          <div className=\"name\">{name}</div>\n        </header>\n      )}\n      <pre className={className} {...props}>\n        {children}\n      </pre>\n      <style jsx>{`\n        .pre {\n          max-width: 100%;\n          border: 1px solid ${border};\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'initial')};\n          height: ${SCALES.height(1, 'auto')};\n          margin: ${SCALES.mt(1.3)} ${SCALES.mr(0)} ${SCALES.mb(1.3)} ${SCALES.ml(0)};\n          border-radius: ${theme.layout.radius};\n          background-color: ${background};\n        }\n        pre {\n          max-width: 100%;\n          font-size: inherit;\n          border: none;\n          margin: 0;\n          line-height: 1.5em;\n          padding: ${SCALES.pt(1.1)} ${SCALES.pr(1)} ${SCALES.pb(1.1)} ${SCALES.pl(1)};\n        }\n        .dark {\n          color: white;\n          background: black;\n        }\n        .dark code {\n          color: white;\n        }\n        header {\n          height: auto;\n          width: 100%;\n          display: flex;\n          justify-content: space-between;\n          border-radius: ${theme.layout.radius};\n          background-color: transparent;\n        }\n        .name {\n          border: 1px solid ${theme.palette.accents_2};\n          background-color: ${theme.palette.accents_2};\n          color: ${theme.palette.accents_5};\n          height: auto;\n          line-height: 1.35em;\n          display: inline-flex;\n          align-items: center;\n          font-size: ${SCALES.font(0.8125)};\n          padding: ${SCALES.font(0.32)} ${SCALES.font(0.5)} ${SCALES.font(0.32)}\n            ${SCALES.font(0.5)};\n          width: auto;\n          border-top-left-radius: calc(${theme.layout.radius} - 1px);\n          border-bottom-right-radius: ${theme.layout.radius};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nCodeComponent.defaultProps = defaultProps\nCodeComponent.displayName = 'GeistCode'\nconst Code = withScale(CodeComponent)\nexport default Code\n"
  },
  {
    "path": "components/code/index.ts",
    "content": "import Code from './code'\n\nexport type { CodeProps } from './code'\nexport default Code\n"
  },
  {
    "path": "components/col/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Col should render correctly 1`] = `ReactWrapper {}`;\n\nexports[`Col should work with span and offset 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"col \",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"col\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 0%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 0%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"col\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"col \",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"col\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 8.333333333333334%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 8.333333333333334%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"col\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"col \",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"col\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 8.333333333333334%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 8.333333333333334%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"col\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"col \",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"col\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 0%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 8.333333333333334%;\n          margin-left: 0%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"col\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/col/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport Col from '../index'\n\ndescribe('Col', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Col>col</Col>)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with span and offset', () => {\n    const wrapper = render(\n      <div>\n        <Col span={2}>col</Col>\n        <Col span={2} offset={2}>\n          col\n        </Col>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should render correctly when nested', () => {\n    const wrapper = mount(\n      <Col>\n        <Col>\n          <Col />\n          col\n        </Col>\n      </Col>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render different components', () => {\n    let wrapper = mount(<Col component=\"p\" />)\n    expect(wrapper.find('p').length).not.toBe(0)\n\n    wrapper = mount(<Col component=\"details\" />)\n    expect(wrapper.find('details').length).not.toBe(0)\n\n    wrapper = mount(<Col component=\"h1\" />)\n    expect(wrapper.find('h1').length).not.toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/col/col.tsx",
    "content": "import React from 'react'\n\ninterface Props {\n  span?: number\n  offset?: number\n  component?: keyof JSX.IntrinsicElements\n  className?: string\n}\n\nconst defaultProps = {\n  span: 24,\n  offset: 0,\n  component: 'div' as keyof JSX.IntrinsicElements,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type ColProps = Props & NativeAttrs\n\nconst Col: React.FC<React.PropsWithChildren<ColProps>> = ({\n  component,\n  children,\n  span,\n  offset,\n  className,\n  ...props\n}: React.PropsWithChildren<ColProps> & typeof defaultProps) => {\n  const Component = component\n\n  return (\n    <Component className={`col ${className}`} {...props}>\n      {children}\n      <style jsx>{`\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: ${(100 / 24) * span}%;\n          margin-left: ${(100 / 24) * offset}%;\n        }\n      `}</style>\n    </Component>\n  )\n}\n\nCol.defaultProps = defaultProps\nCol.displayName = 'GeistCol'\nexport default Col\n"
  },
  {
    "path": "components/col/index.ts",
    "content": "import Col from './col'\n\nexport type { ColProps } from './col'\nexport default Col\n"
  },
  {
    "path": "components/collapse/__tests__/__snapshots__/group.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Collapse Group should be no errors when children are missing 1`] = `ReactWrapper {}`;\n\nexports[`Collapse Group should render correctly 1`] = `ReactWrapper {}`;\n\nexports[`Collapse Group should work without accordion 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"collapse-group\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"collapse\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"view\",\n              \"role\": \"button\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title1\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h3\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"text\",\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"data\": \" \",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title1\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"shape-rendering\": \"geometricPrecision\",\n                      \"stroke\": \"currentColor\",\n                      \"stroke-linecap\": \"round\",\n                      \"stroke-linejoin\": \"round\",\n                      \"stroke-width\": \"1.5\",\n                      \"style\": \"color:currentColor\",\n                      \"viewBox\": \"0 0 24 24\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M6 9l6 6 6-6\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \" \",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content1\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"container\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"content1\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content1\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title1\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content1\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"collapse\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title2\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title2\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title2\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .collapse-group {\n            width: auto;\n            height: auto;\n            padding: 0 calc(0.6 * 16px) 0 calc(0.6 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .collapse-group &gt; :global(div + div) {\n            border-top: none;\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"collapse\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"view\",\n              \"role\": \"button\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title2\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h3\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"text\",\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"data\": \" \",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"shape-rendering\": \"geometricPrecision\",\n                      \"stroke\": \"currentColor\",\n                      \"stroke-linecap\": \"round\",\n                      \"stroke-linejoin\": \"round\",\n                      \"stroke-width\": \"1.5\",\n                      \"style\": \"color:currentColor\",\n                      \"viewBox\": \"0 0 24 24\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M6 9l6 6 6-6\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \" \",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"container\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"content2\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title2\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          .collapse-group {\n            width: auto;\n            height: auto;\n            padding: 0 calc(0.6 * 16px) 0 calc(0.6 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .collapse-group &gt; :global(div + div) {\n            border-top: none;\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"collapse\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title1\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content1\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title1\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n          .collapse-group {\n            width: auto;\n            height: auto;\n            padding: 0 calc(0.6 * 16px) 0 calc(0.6 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .collapse-group &gt; :global(div + div) {\n            border-top: none;\n          }\n        \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"collapse\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content2\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title2\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content2\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title2\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title2\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title2\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"collapse\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"container\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"content1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content1\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title1\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"container\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content1\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"class\": \"content\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"content1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"div\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"class\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"class\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"view\",\n                      \"role\": \"button\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"title\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title1\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"data\": \" \",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"currentColor\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1.5\",\n                                  \"style\": \"color:currentColor\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"text\",\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title1\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"data\": \" \",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"title1\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"h3\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"type\": \"text\",\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"role\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"role\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/collapse/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Collapse should render correctly 1`] = `ReactWrapper {}`;\n\nexports[`Collapse should work with initial visible 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"collapse\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"view\",\n              \"role\": \"button\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h3\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"text\",\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"data\": \" \",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"shape-rendering\": \"geometricPrecision\",\n                      \"stroke\": \"currentColor\",\n                      \"stroke-linecap\": \"round\",\n                      \"stroke-linejoin\": \"round\",\n                      \"stroke-width\": \"1.5\",\n                      \"style\": \"color:currentColor\",\n                      \"viewBox\": \"0 0 24 24\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M6 9l6 6 6-6\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \" \",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"subtitle\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"container\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"content\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"collapse\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container expanded\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"container expanded\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container expanded\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"collapse\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"view\",\n              \"role\": \"button\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h3\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"text\",\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"data\": \" \",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"shape-rendering\": \"geometricPrecision\",\n                      \"stroke\": \"currentColor\",\n                      \"stroke-linecap\": \"round\",\n                      \"stroke-linejoin\": \"round\",\n                      \"stroke-width\": \"1.5\",\n                      \"style\": \"color:currentColor\",\n                      \"viewBox\": \"0 0 24 24\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M6 9l6 6 6-6\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \" \",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"container expanded\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"container expanded\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"content\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"container expanded\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: visible;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: auto;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(-180deg);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"collapse\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"subtitle\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"subtitle\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"title\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"data\": \" \",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"currentColor\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1.5\",\n                                  \"style\": \"color:currentColor\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"text\",\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"data\": \" \",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"title\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"h3\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"type\": \"text\",\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Collapse should work with subtitle and shadow 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"collapse\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"view\",\n              \"role\": \"button\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h3\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"text\",\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"data\": \" \",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"shape-rendering\": \"geometricPrecision\",\n                      \"stroke\": \"currentColor\",\n                      \"stroke-linecap\": \"round\",\n                      \"stroke-linejoin\": \"round\",\n                      \"stroke-width\": \"1.5\",\n                      \"style\": \"color:currentColor\",\n                      \"viewBox\": \"0 0 24 24\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M6 9l6 6 6-6\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \" \",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"subtitle\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"container\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"content\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"collapse shadow\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"subtitle\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"subtitle\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"title\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"data\": \" \",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"currentColor\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1.5\",\n                                  \"style\": \"color:currentColor\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"text\",\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"data\": \" \",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"title\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"h3\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"type\": \"text\",\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"collapse shadow\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"view\",\n              \"role\": \"button\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h3\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"text\",\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  Node {\n                    \"data\": \" \",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"none\",\n                      \"shape-rendering\": \"geometricPrecision\",\n                      \"stroke\": \"currentColor\",\n                      \"stroke-linecap\": \"round\",\n                      \"stroke-linejoin\": \"round\",\n                      \"stroke-width\": \"1.5\",\n                      \"style\": \"color:currentColor\",\n                      \"viewBox\": \"0 0 24 24\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M6 9l6 6 6-6\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \" \",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"shape-rendering\": undefined,\n                      \"stroke\": undefined,\n                      \"stroke-linecap\": undefined,\n                      \"stroke-linejoin\": undefined,\n                      \"stroke-width\": undefined,\n                      \"style\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"subtitle\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"container\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"content\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"collapse\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"view\",\n                \"role\": \"button\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"h3\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"text\",\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    Node {\n                      \"data\": \" \",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"none\",\n                        \"shape-rendering\": \"geometricPrecision\",\n                        \"stroke\": \"currentColor\",\n                        \"stroke-linecap\": \"round\",\n                        \"stroke-linejoin\": \"round\",\n                        \"stroke-width\": \"1.5\",\n                        \"style\": \"color:currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M6 9l6 6 6-6\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \" \",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"shape-rendering\": undefined,\n                        \"stroke\": undefined,\n                        \"stroke-linecap\": undefined,\n                        \"stroke-linejoin\": undefined,\n                        \"stroke-width\": undefined,\n                        \"style\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"subtitle\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"container\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"content\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"view\",\n                  \"role\": \"button\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"h3\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"text\",\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      Node {\n                        \"data\": \" \",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"none\",\n                          \"shape-rendering\": \"geometricPrecision\",\n                          \"stroke\": \"currentColor\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\",\n                          \"stroke-width\": \"1.5\",\n                          \"style\": \"color:currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M6 9l6 6 6-6\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \" \",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"shape-rendering\": undefined,\n                          \"stroke\": undefined,\n                          \"stroke-linecap\": undefined,\n                          \"stroke-linejoin\": undefined,\n                          \"stroke-width\": undefined,\n                          \"style\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"subtitle\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"role\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .collapse {\n          border-top: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n\n        .shadow {\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n          border: none;\n          border-radius: 6px;\n          padding: 16pt;\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: #000;\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: #666;\n          margin: 0;\n        }\n\n        .subtitle &gt; :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: calc(1.2 * 16px) 0 calc(1.2 * 16px) 0;\n        }\n\n        .content &gt; :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content &gt; :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"container\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"content\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"class\": \"content\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"content\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\n          transition: height 200ms ease;\n        }\n\n        .expanded {\n          height: 0;\n          visibility: visible;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"content\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"class\": \"content\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"content\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"div\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"view\",\n                    \"role\": \"button\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"title\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"h3\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"text\",\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        Node {\n                          \"data\": \" \",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"none\",\n                            \"shape-rendering\": \"geometricPrecision\",\n                            \"stroke\": \"currentColor\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                            \"stroke-width\": \"1.5\",\n                            \"style\": \"color:currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M6 9l6 6 6-6\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \" \",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"shape-rendering\": undefined,\n                            \"stroke\": undefined,\n                            \"stroke-linecap\": undefined,\n                            \"stroke-linejoin\": undefined,\n                            \"stroke-width\": undefined,\n                            \"style\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"subtitle\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"subtitle\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"subtitle\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"subtitle\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"title\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"title\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"h3\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": Node {\n                              \"data\": \" \",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"fill\": \"none\",\n                                  \"shape-rendering\": \"geometricPrecision\",\n                                  \"stroke\": \"currentColor\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                  \"stroke-width\": \"1.5\",\n                                  \"style\": \"color:currentColor\",\n                                  \"viewBox\": \"0 0 24 24\",\n                                },\n                                \"children\": Array [\n                                  Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M6 9l6 6 6-6\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                ],\n                                \"name\": \"svg\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"fill\": undefined,\n                                  \"shape-rendering\": undefined,\n                                  \"stroke\": undefined,\n                                  \"stroke-linecap\": undefined,\n                                  \"stroke-linejoin\": undefined,\n                                  \"stroke-width\": undefined,\n                                  \"style\": undefined,\n                                  \"viewBox\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"text\",\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          Node {\n                            \"data\": \" \",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"fill\": \"none\",\n                                \"shape-rendering\": \"geometricPrecision\",\n                                \"stroke\": \"currentColor\",\n                                \"stroke-linecap\": \"round\",\n                                \"stroke-linejoin\": \"round\",\n                                \"stroke-width\": \"1.5\",\n                                \"style\": \"color:currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M6 9l6 6 6-6\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"shape-rendering\": undefined,\n                                \"stroke\": undefined,\n                                \"stroke-linecap\": undefined,\n                                \"stroke-linejoin\": undefined,\n                                \"stroke-width\": undefined,\n                                \"style\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"title\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"h3\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"type\": \"text\",\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"none\",\n                              \"shape-rendering\": \"geometricPrecision\",\n                              \"stroke\": \"currentColor\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                              \"stroke-width\": \"1.5\",\n                              \"style\": \"color:currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M6 9l6 6 6-6\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(0);\n          width: 1.5em;\n          height: 1.5em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M6 9l6 6 6-6\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"data\": \" \",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"title\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"h3\",\n                                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"type\": \"text\",\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"shape-rendering\": undefined,\n                              \"stroke\": undefined,\n                              \"stroke-linecap\": undefined,\n                              \"stroke-linejoin\": undefined,\n                              \"stroke-width\": undefined,\n                              \"style\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"role\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/collapse/__tests__/group.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Collapse } from 'components'\nimport { updateWrapper } from 'tests/utils'\n\ndescribe('Collapse Group', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Collapse.Group>\n        <Collapse title=\"title1\">content1</Collapse>\n        <Collapse title=\"title2\">content2</Collapse>\n      </Collapse.Group>,\n    )\n\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be no errors when children are missing', () => {\n    const wrapper = mount(<Collapse.Group></Collapse.Group>)\n\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work without accordion', () => {\n    const wrapper = render(\n      <Collapse.Group accordion={false}>\n        <Collapse title=\"title1\">content1</Collapse>\n        <Collapse title=\"title2\">content2</Collapse>\n      </Collapse.Group>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should be display all when without accordion', async () => {\n    const wrapper = mount(\n      <Collapse.Group accordion={false}>\n        <Collapse title=\"title1\">content1</Collapse>\n        <Collapse title=\"title2\">content2</Collapse>\n      </Collapse.Group>,\n    )\n\n    const views = wrapper.find('.view')\n    views.at(0).simulate('click')\n    views.at(1).simulate('click')\n    await updateWrapper(wrapper, 300)\n    expect(wrapper.find('.expanded').length).toBe(2)\n\n    views.at(0).simulate('click')\n    views.at(1).simulate('click')\n    await updateWrapper(wrapper, 300)\n    expect(wrapper.find('.expanded').length).toBe(0)\n  })\n\n  it('should be display one when in accordion mode', async () => {\n    const wrapper = mount(\n      <Collapse.Group>\n        <Collapse title=\"title1\">content1</Collapse>\n        <Collapse title=\"title2\">content2</Collapse>\n      </Collapse.Group>,\n    )\n\n    const views = wrapper.find('.view')\n    views.at(0).simulate('click')\n    views.at(1).simulate('click')\n    await updateWrapper(wrapper, 300)\n    expect(wrapper.find('.expanded').length).toBe(1)\n\n    views.at(1).simulate('click')\n    await updateWrapper(wrapper, 300)\n    expect(wrapper.find('.expanded').length).toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/collapse/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Collapse } from 'components'\nimport { updateWrapper } from 'tests/utils'\n\ndescribe('Collapse', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Collapse title=\"title\">content</Collapse>)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with subtitle and shadow', () => {\n    const wrapper = render(\n      <div>\n        <Collapse title=\"title\" subtitle=\"subtitle\">\n          content\n        </Collapse>\n        <Collapse title=\"title\" subtitle=\"subtitle\" shadow>\n          content\n        </Collapse>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should work with initial visible', () => {\n    const wrapper = render(\n      <div>\n        <Collapse title=\"title\" subtitle=\"subtitle\">\n          content\n        </Collapse>\n        <Collapse title=\"title\" initialVisible>\n          content\n        </Collapse>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should throw error when title missing', () => {\n    const Component = Collapse as any\n    let errorMessage = ''\n    const errorSpy = jest\n      .spyOn(console, 'error')\n      .mockImplementation(msg => (errorMessage = msg))\n\n    mount(<Component subtitle=\"subtitle\">content</Component>)\n    expect(errorMessage.toLowerCase()).not.toEqual('')\n    errorSpy.mockRestore()\n  })\n\n  it('should expand when title clicked', async () => {\n    const wrapper = mount(<Collapse title=\"title\">content</Collapse>)\n    wrapper.find('.view').at(0).simulate('click')\n    await updateWrapper(wrapper, 300)\n    expect(wrapper.find('.expanded').length).not.toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/collapse/collapse-context.ts",
    "content": "import React from 'react'\n\nexport interface CollapseConfig {\n  values: Array<number>\n  updateValues?: (currentIndex: number | undefined, nextState: boolean) => unknown\n}\n\nconst defaultContext = {\n  values: [],\n}\n\nexport const CollapseContext = React.createContext<CollapseConfig>(defaultContext)\n\nexport const useCollapseContext = (): CollapseConfig =>\n  React.useContext<CollapseConfig>(CollapseContext)\n"
  },
  {
    "path": "components/collapse/collapse-group.tsx",
    "content": "import React, { useMemo } from 'react'\nimport Collapse from './collapse'\nimport useCurrentState from '../utils/use-current-state'\nimport { setChildrenIndex } from '../utils/collections'\nimport { CollapseContext, CollapseConfig } from './collapse-context'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  accordion?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  accordion: true,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CollapseGroupProps = Props & NativeAttrs\n\nconst CollapseGroupComponent: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({\n  children,\n  accordion,\n  className,\n  ...props\n}: React.PropsWithChildren<CollapseGroupProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const [state, setState, stateRef] = useCurrentState<Array<number>>([])\n  const classes = useClasses('collapse-group', className)\n\n  const updateValues = (currentIndex: number, nextState: boolean) => {\n    const hasChild = stateRef.current.find(val => val === currentIndex)\n    if (accordion) {\n      if (nextState) return setState([currentIndex])\n      return setState([])\n    }\n\n    if (nextState) {\n      // In a few cases, the user will set Collapse Component state manually.\n      // If the user incorrectly set the state, Group component should ignore it.\n      /* istanbul ignore if */\n      if (hasChild) return\n      return setState([...stateRef.current, currentIndex])\n    }\n    setState(stateRef.current.filter(item => item !== currentIndex))\n  }\n\n  const initialValue = useMemo<CollapseConfig>(\n    () => ({\n      values: state,\n      updateValues,\n    }),\n    [state.join(',')],\n  )\n  const hasIndexChildren = useMemo(\n    () => setChildrenIndex(children, [Collapse]),\n    [children],\n  )\n\n  return (\n    <CollapseContext.Provider value={initialValue}>\n      <div className={classes} {...props}>\n        {hasIndexChildren}\n        <style jsx>{`\n          .collapse-group {\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, 'auto')};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0.6)} ${SCALES.pb(0)} ${SCALES.pl(0.6)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n\n          .collapse-group > :global(div + div) {\n            border-top: none;\n          }\n        `}</style>\n      </div>\n    </CollapseContext.Provider>\n  )\n}\n\nCollapseGroupComponent.defaultProps = defaultProps\nCollapseGroupComponent.displayName = 'GeistCollapseGroup'\nconst CollapseGroup = withScale(CollapseGroupComponent)\nexport default CollapseGroup\n"
  },
  {
    "path": "components/collapse/collapse-icon.tsx",
    "content": "import React from 'react'\n\ninterface Props {\n  active?: boolean\n}\n\nconst CollapseIcon: React.FC<Props> = ({ active }) => {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\"\n      style={{ color: 'currentColor' }}>\n      <path d=\"M6 9l6 6 6-6\" />\n\n      <style jsx>{`\n        svg {\n          transition: transform 200ms ease;\n          transform: rotateZ(${active ? '-180deg' : '0'});\n          width: 1.5em;\n          height: 1.5em;\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nconst MemoCollapseIcon = React.memo(CollapseIcon)\n\nexport default MemoCollapseIcon\n"
  },
  {
    "path": "components/collapse/collapse.tsx",
    "content": "import React, { useEffect } from 'react'\nimport CollapseIcon from './collapse-icon'\nimport useTheme from '../use-theme'\nimport Expand from '../shared/expand'\nimport { useCollapseContext } from './collapse-context'\nimport useCurrentState from '../utils/use-current-state'\nimport useWarning from '../utils/use-warning'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  title: string\n  subtitle?: React.ReactNode | string\n  initialVisible?: boolean\n  shadow?: boolean\n  className?: string\n  index?: number\n}\n\nconst defaultProps = {\n  className: '',\n  shadow: false,\n  initialVisible: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type CollapseProps = Props & NativeAttrs\n\nconst CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({\n  children,\n  title,\n  subtitle,\n  initialVisible,\n  shadow,\n  className,\n  index,\n  ...props\n}: React.PropsWithChildren<CollapseProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { values, updateValues } = useCollapseContext()\n  const [visible, setVisible, visibleRef] = useCurrentState<boolean>(initialVisible)\n  const classes = useClasses(\n    'collapse',\n    {\n      shadow,\n    },\n    className,\n  )\n\n  if (!title) {\n    useWarning('\"title\" is required.', 'Collapse')\n  }\n\n  useEffect(() => {\n    if (!values.length) return\n    const isActive = !!values.find(item => item === index)\n    setVisible(isActive)\n  }, [values.join(',')])\n\n  const clickHandler = () => {\n    const next = !visibleRef.current\n    setVisible(next)\n    updateValues && updateValues(index, next)\n  }\n\n  return (\n    <div className={classes} {...props}>\n      <div className=\"view\" role=\"button\" onClick={clickHandler}>\n        <div className=\"title\">\n          <h3>{title}</h3> <CollapseIcon active={visible} />\n        </div>\n        {subtitle && <div className=\"subtitle\">{subtitle}</div>}\n      </div>\n      <Expand isExpanded={visible}>\n        <div className=\"content\">{children}</div>\n      </Expand>\n      <style jsx>{`\n        .collapse {\n          border-top: 1px solid ${theme.palette.border};\n          border-bottom: 1px solid ${theme.palette.border};\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .shadow {\n          box-shadow: ${theme.expressiveness.shadowSmall};\n          border: none;\n          border-radius: ${theme.layout.radius};\n          padding: ${theme.layout.gap};\n        }\n\n        .view {\n          cursor: pointer;\n          outline: none;\n        }\n\n        .title {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          color: ${theme.palette.foreground};\n        }\n\n        .title h3 {\n          margin: 0;\n          font-size: 1.5em;\n        }\n\n        .subtitle {\n          color: ${theme.palette.accents_5};\n          margin: 0;\n        }\n\n        .subtitle > :global(*) {\n          margin: 0;\n        }\n\n        .content {\n          font-size: inherit;\n          line-height: 1.6em;\n          padding: ${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)};\n        }\n\n        .content > :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content > :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nCollapseComponent.defaultProps = defaultProps\nCollapseComponent.displayName = 'GeistCollapse'\nconst Collapse = withScale(CollapseComponent)\nexport default Collapse\n"
  },
  {
    "path": "components/collapse/index.ts",
    "content": "import Collapse from './collapse'\nimport CollapseGroup from './collapse-group'\n\nexport type CollapseComponentType = typeof Collapse & {\n  Group: typeof CollapseGroup\n}\n;(Collapse as CollapseComponentType).Group = CollapseGroup\n\nexport type { CollapseProps } from './collapse'\nexport type { CollapseGroupProps } from './collapse-group'\nexport default Collapse as CollapseComponentType\n"
  },
  {
    "path": "components/css-baseline/__tests__/__snapshots__/baseline.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CSSBaseline should render correctly 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"data\": \"\n        html,\n        body {\n          background-color: #fff;\n          color: #000;\n        }\n\n        html {\n          font-size: 16px;\n          --geist-icons-background: #fff;\n        }\n\n        body {\n          -webkit-font-smoothing: antialiased;\n          -moz-osx-font-smoothing: grayscale;\n          text-rendering: optimizeLegibility;\n          font-size: 1rem;\n          line-height: 1.5;\n          margin: 0;\n          padding: 0;\n          min-height: 100%;\n          position: relative;\n          overflow-x: hidden;\n          font-family: &quot;Inter&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;\n        }\n\n        #__next {\n          overflow-x: hidden;\n        }\n\n        *,\n        *:before,\n        *:after {\n          box-sizing: inherit;\n          text-rendering: geometricPrecision;\n          -webkit-tap-highlight-color: transparent;\n        }\n\n        p,\n        small {\n          font-weight: 400;\n          color: inherit;\n          letter-spacing: -0.005625em;\n          font-family: &quot;Inter&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;\n        }\n\n        p {\n          margin: 1em 0;\n          font-size: 1em;\n          line-height: 1.625em;\n        }\n\n        small {\n          margin: 0;\n          line-height: 1.5;\n          font-size: 0.875em;\n        }\n\n        b {\n          font-weight: 600;\n        }\n\n        span {\n          font-size: inherit;\n          color: inherit;\n          font-weight: inherit;\n        }\n\n        img {\n          max-width: 100%;\n        }\n\n        a {\n          cursor: pointer;\n          font-size: inherit;\n          -webkit-touch-callout: none;\n          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          -webkit-box-align: center;\n          align-items: center;\n          color: #0070f3;\n          text-decoration: none;\n        }\n\n        a:hover {\n          text-decoration: none;\n        }\n\n        ul,\n        ol {\n          padding: 0;\n          list-style-type: none;\n          margin: 8pt 8pt 8pt\n            16pt;\n          color: #000;\n        }\n\n        ol {\n          list-style-type: decimal;\n        }\n\n        li {\n          margin-bottom: 0.625em;\n          font-size: 1em;\n          line-height: 1.625em;\n        }\n\n        ul li:before {\n          content: &#x27;–&#x27;;\n          display: inline-block;\n          color: #888;\n          position: absolute;\n          margin-left: -0.9375em;\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          color: inherit;\n          margin: 0 0 0.7rem 0;\n        }\n\n        h1 {\n          font-size: 3rem;\n          letter-spacing: -0.02em;\n          line-height: 1.5;\n          font-weight: 700;\n        }\n\n        h2 {\n          font-size: 2.25rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h3 {\n          font-size: 1.5rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h4 {\n          font-size: 1.25rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h5 {\n          font-size: 1rem;\n          letter-spacing: -0.01em;\n          font-weight: 600;\n        }\n\n        h6 {\n          font-size: 0.875rem;\n          letter-spacing: -0.005em;\n          font-weight: 600;\n        }\n\n        button,\n        input,\n        select,\n        textarea {\n          font-family: inherit;\n          font-size: inherit;\n          line-height: inherit;\n          color: inherit;\n          margin: 0;\n        }\n\n        button:focus,\n        input:focus,\n        select:focus,\n        textarea:focus {\n          outline: none;\n        }\n\n        code {\n          color: #f81ce5;\n          font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;\n          font-size: 0.9em;\n          white-space: pre-wrap;\n        }\n\n        code:before,\n        code:after {\n          content: &#x27;\\`&#x27;;\n        }\n\n        pre {\n          padding: calc(16pt * 0.9) 16pt;\n          margin: 16pt 0;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;\n          white-space: pre;\n          overflow: auto;\n          line-height: 1.5;\n          text-align: left;\n          font-size: 14px;\n          -webkit-overflow-scrolling: touch;\n        }\n\n        pre code {\n          color: #000;\n          font-size: 1em;\n          line-height: 1.25em;\n          white-space: pre;\n        }\n\n        pre code:before,\n        pre code:after {\n          display: none;\n        }\n\n        pre :global(p) {\n          margin: 0;\n        }\n\n        pre::-webkit-scrollbar {\n          display: none;\n          width: 0;\n          height: 0;\n          background: transparent;\n        }\n\n        hr {\n          border-color: #eaeaea;\n        }\n\n        details {\n          background-color: #fafafa;\n          border: none;\n        }\n\n        details:focus,\n        details:hover,\n        details:active {\n          outline: none;\n        }\n\n        summary {\n          cursor: pointer;\n          user-select: none;\n          list-style: none;\n          outline: none;\n        }\n\n        summary::marker,\n        summary::before,\n        summary::-webkit-details-marker {\n          display: none;\n        }\n\n        summary::-moz-list-bullet {\n          font-size: 0;\n        }\n\n        summary:focus,\n        summary:hover,\n        summary:active {\n          outline: none;\n          list-style: none;\n        }\n\n        blockquote {\n          padding: calc(0.667 * 16pt) 16pt;\n          color: #666;\n          background-color: #fafafa;\n          border-radius: 6px;\n          margin: 1.5em 0;\n          border: 1px solid #eaeaea;\n        }\n\n        blockquote :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        blockquote :global(*:last-child) {\n          margin-bottom: 0;\n        }\n\n        ::selection {\n          background-color: #79ffe1;\n          color: #000;\n        }\n      \",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"text\",\n      },\n    ],\n    \"name\": \"style\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"style\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`CSSBaseline should render dark mode correctly 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"data\": \"\n        html,\n        body {\n          background-color: #000;\n          color: #fff;\n        }\n\n        html {\n          font-size: 16px;\n          --geist-icons-background: #000;\n        }\n\n        body {\n          -webkit-font-smoothing: antialiased;\n          -moz-osx-font-smoothing: grayscale;\n          text-rendering: optimizeLegibility;\n          font-size: 1rem;\n          line-height: 1.5;\n          margin: 0;\n          padding: 0;\n          min-height: 100%;\n          position: relative;\n          overflow-x: hidden;\n          font-family: &quot;Inter&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;\n        }\n\n        #__next {\n          overflow-x: hidden;\n        }\n\n        *,\n        *:before,\n        *:after {\n          box-sizing: inherit;\n          text-rendering: geometricPrecision;\n          -webkit-tap-highlight-color: transparent;\n        }\n\n        p,\n        small {\n          font-weight: 400;\n          color: inherit;\n          letter-spacing: -0.005625em;\n          font-family: &quot;Inter&quot;, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, &quot;Roboto&quot;, &quot;Oxygen&quot;, &quot;Ubuntu&quot;, &quot;Cantarell&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;\n        }\n\n        p {\n          margin: 1em 0;\n          font-size: 1em;\n          line-height: 1.625em;\n        }\n\n        small {\n          margin: 0;\n          line-height: 1.5;\n          font-size: 0.875em;\n        }\n\n        b {\n          font-weight: 600;\n        }\n\n        span {\n          font-size: inherit;\n          color: inherit;\n          font-weight: inherit;\n        }\n\n        img {\n          max-width: 100%;\n        }\n\n        a {\n          cursor: pointer;\n          font-size: inherit;\n          -webkit-touch-callout: none;\n          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          -webkit-box-align: center;\n          align-items: center;\n          color: #3291ff;\n          text-decoration: none;\n        }\n\n        a:hover {\n          text-decoration: none;\n        }\n\n        ul,\n        ol {\n          padding: 0;\n          list-style-type: none;\n          margin: 8pt 8pt 8pt\n            16pt;\n          color: #fff;\n        }\n\n        ol {\n          list-style-type: decimal;\n        }\n\n        li {\n          margin-bottom: 0.625em;\n          font-size: 1em;\n          line-height: 1.625em;\n        }\n\n        ul li:before {\n          content: &#x27;–&#x27;;\n          display: inline-block;\n          color: #666;\n          position: absolute;\n          margin-left: -0.9375em;\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          color: inherit;\n          margin: 0 0 0.7rem 0;\n        }\n\n        h1 {\n          font-size: 3rem;\n          letter-spacing: -0.02em;\n          line-height: 1.5;\n          font-weight: 700;\n        }\n\n        h2 {\n          font-size: 2.25rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h3 {\n          font-size: 1.5rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h4 {\n          font-size: 1.25rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h5 {\n          font-size: 1rem;\n          letter-spacing: -0.01em;\n          font-weight: 600;\n        }\n\n        h6 {\n          font-size: 0.875rem;\n          letter-spacing: -0.005em;\n          font-weight: 600;\n        }\n\n        button,\n        input,\n        select,\n        textarea {\n          font-family: inherit;\n          font-size: inherit;\n          line-height: inherit;\n          color: inherit;\n          margin: 0;\n        }\n\n        button:focus,\n        input:focus,\n        select:focus,\n        textarea:focus {\n          outline: none;\n        }\n\n        code {\n          color: #79ffe1;\n          font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;\n          font-size: 0.9em;\n          white-space: pre-wrap;\n        }\n\n        code:before,\n        code:after {\n          content: &#x27;\\`&#x27;;\n        }\n\n        pre {\n          padding: calc(16pt * 0.9) 16pt;\n          margin: 16pt 0;\n          border: 1px solid #333;\n          border-radius: 6px;\n          font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;\n          white-space: pre;\n          overflow: auto;\n          line-height: 1.5;\n          text-align: left;\n          font-size: 14px;\n          -webkit-overflow-scrolling: touch;\n        }\n\n        pre code {\n          color: #fff;\n          font-size: 1em;\n          line-height: 1.25em;\n          white-space: pre;\n        }\n\n        pre code:before,\n        pre code:after {\n          display: none;\n        }\n\n        pre :global(p) {\n          margin: 0;\n        }\n\n        pre::-webkit-scrollbar {\n          display: none;\n          width: 0;\n          height: 0;\n          background: transparent;\n        }\n\n        hr {\n          border-color: #333;\n        }\n\n        details {\n          background-color: #111;\n          border: none;\n        }\n\n        details:focus,\n        details:hover,\n        details:active {\n          outline: none;\n        }\n\n        summary {\n          cursor: pointer;\n          user-select: none;\n          list-style: none;\n          outline: none;\n        }\n\n        summary::marker,\n        summary::before,\n        summary::-webkit-details-marker {\n          display: none;\n        }\n\n        summary::-moz-list-bullet {\n          font-size: 0;\n        }\n\n        summary:focus,\n        summary:hover,\n        summary:active {\n          outline: none;\n          list-style: none;\n        }\n\n        blockquote {\n          padding: calc(0.667 * 16pt) 16pt;\n          color: #888;\n          background-color: #111;\n          border-radius: 6px;\n          margin: 1.5em 0;\n          border: 1px solid #333;\n        }\n\n        blockquote :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        blockquote :global(*:last-child) {\n          margin-bottom: 0;\n        }\n\n        ::selection {\n          background-color: #f81ce5;\n          color: #fff;\n        }\n      \",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"text\",\n      },\n    ],\n    \"name\": \"style\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"style\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/css-baseline/__tests__/baseline.test.tsx",
    "content": "import React from 'react'\nimport { render } from 'enzyme'\nimport { CssBaseline, GeistProvider } from 'components'\n\ndescribe('CSSBaseline', () => {\n  it('should render correctly', () => {\n    const wrapper = render(\n      <GeistProvider>\n        <CssBaseline />\n      </GeistProvider>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should render dark mode correctly', () => {\n    const wrapper = render(\n      <GeistProvider themeType=\"dark\">\n        <CssBaseline />\n      </GeistProvider>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "components/css-baseline/css-baseline.tsx",
    "content": "import React, { ReactElement } from 'react'\nimport useTheme from '../use-theme'\nimport flush, { flushToHTML } from 'styled-jsx/server'\n\nexport type FlushToReact = <T>(opts?: { nonce?: string }) => Array<ReactElement<T>>\nexport type FlushToHTML = (opts?: { nonce?: string }) => string\n\nconst CssBaseline: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const theme = useTheme()\n\n  return (\n    <>\n      {children}\n      <style global jsx>{`\n        html,\n        body {\n          background-color: ${theme.palette.background};\n          color: ${theme.palette.foreground};\n        }\n\n        html {\n          font-size: 16px;\n          --geist-icons-background: ${theme.palette.background};\n        }\n\n        body {\n          -webkit-font-smoothing: antialiased;\n          -moz-osx-font-smoothing: grayscale;\n          text-rendering: optimizeLegibility;\n          font-size: 1rem;\n          line-height: 1.5;\n          margin: 0;\n          padding: 0;\n          min-height: 100%;\n          position: relative;\n          overflow-x: hidden;\n          font-family: ${theme.font.sans};\n        }\n\n        #__next {\n          overflow-x: hidden;\n        }\n\n        *,\n        *:before,\n        *:after {\n          box-sizing: inherit;\n          text-rendering: geometricPrecision;\n          -webkit-tap-highlight-color: transparent;\n        }\n\n        p,\n        small {\n          font-weight: 400;\n          color: inherit;\n          letter-spacing: -0.005625em;\n          font-family: ${theme.font.sans};\n        }\n\n        p {\n          margin: 1em 0;\n          font-size: 1em;\n          line-height: 1.625em;\n        }\n\n        small {\n          margin: 0;\n          line-height: 1.5;\n          font-size: 0.875em;\n        }\n\n        b {\n          font-weight: 600;\n        }\n\n        span {\n          font-size: inherit;\n          color: inherit;\n          font-weight: inherit;\n        }\n\n        img {\n          max-width: 100%;\n        }\n\n        a {\n          cursor: pointer;\n          font-size: inherit;\n          -webkit-touch-callout: none;\n          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n          -webkit-box-align: center;\n          align-items: center;\n          color: ${theme.palette.link};\n          text-decoration: ${theme.expressiveness.linkStyle};\n        }\n\n        a:hover {\n          text-decoration: ${theme.expressiveness.linkHoverStyle};\n        }\n\n        ul,\n        ol {\n          padding: 0;\n          list-style-type: none;\n          margin: ${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gapHalf}\n            ${theme.layout.gap};\n          color: ${theme.palette.foreground};\n        }\n\n        ol {\n          list-style-type: decimal;\n        }\n\n        li {\n          margin-bottom: 0.625em;\n          font-size: 1em;\n          line-height: 1.625em;\n        }\n\n        ul li:before {\n          content: '–';\n          display: inline-block;\n          color: ${theme.palette.accents_4};\n          position: absolute;\n          margin-left: -0.9375em;\n        }\n\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          color: inherit;\n          margin: 0 0 0.7rem 0;\n        }\n\n        h1 {\n          font-size: 3rem;\n          letter-spacing: -0.02em;\n          line-height: 1.5;\n          font-weight: 700;\n        }\n\n        h2 {\n          font-size: 2.25rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h3 {\n          font-size: 1.5rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h4 {\n          font-size: 1.25rem;\n          letter-spacing: -0.02em;\n          font-weight: 600;\n        }\n\n        h5 {\n          font-size: 1rem;\n          letter-spacing: -0.01em;\n          font-weight: 600;\n        }\n\n        h6 {\n          font-size: 0.875rem;\n          letter-spacing: -0.005em;\n          font-weight: 600;\n        }\n\n        button,\n        input,\n        select,\n        textarea {\n          font-family: inherit;\n          font-size: inherit;\n          line-height: inherit;\n          color: inherit;\n          margin: 0;\n        }\n\n        button:focus,\n        input:focus,\n        select:focus,\n        textarea:focus {\n          outline: none;\n        }\n\n        code {\n          color: ${theme.palette.code};\n          font-family: ${theme.font.mono};\n          font-size: 0.9em;\n          white-space: pre-wrap;\n        }\n\n        code:before,\n        code:after {\n          content: '\\`';\n        }\n\n        pre {\n          padding: calc(${theme.layout.gap} * 0.9) ${theme.layout.gap};\n          margin: ${theme.layout.gap} 0;\n          border: 1px solid ${theme.palette.accents_2};\n          border-radius: ${theme.layout.radius};\n          font-family: ${theme.font.mono};\n          white-space: pre;\n          overflow: auto;\n          line-height: 1.5;\n          text-align: left;\n          font-size: 14px;\n          -webkit-overflow-scrolling: touch;\n        }\n\n        pre code {\n          color: ${theme.palette.foreground};\n          font-size: 1em;\n          line-height: 1.25em;\n          white-space: pre;\n        }\n\n        pre code:before,\n        pre code:after {\n          display: none;\n        }\n\n        pre :global(p) {\n          margin: 0;\n        }\n\n        pre::-webkit-scrollbar {\n          display: none;\n          width: 0;\n          height: 0;\n          background: transparent;\n        }\n\n        hr {\n          border-color: ${theme.palette.accents_2};\n        }\n\n        details {\n          background-color: ${theme.palette.accents_1};\n          border: none;\n        }\n\n        details:focus,\n        details:hover,\n        details:active {\n          outline: none;\n        }\n\n        summary {\n          cursor: pointer;\n          user-select: none;\n          list-style: none;\n          outline: none;\n        }\n\n        summary::marker,\n        summary::before,\n        summary::-webkit-details-marker {\n          display: none;\n        }\n\n        summary::-moz-list-bullet {\n          font-size: 0;\n        }\n\n        summary:focus,\n        summary:hover,\n        summary:active {\n          outline: none;\n          list-style: none;\n        }\n\n        blockquote {\n          padding: calc(0.667 * ${theme.layout.gap}) ${theme.layout.gap};\n          color: ${theme.palette.accents_5};\n          background-color: ${theme.palette.accents_1};\n          border-radius: ${theme.layout.radius};\n          margin: 1.5em 0;\n          border: 1px solid ${theme.palette.border};\n        }\n\n        blockquote :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        blockquote :global(*:last-child) {\n          margin-bottom: 0;\n        }\n\n        ::selection {\n          background-color: ${theme.palette.selection};\n          color: ${theme.palette.foreground};\n        }\n      `}</style>\n    </>\n  )\n}\n\ntype MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {\n  flush: FlushToReact\n  flushToHTML: FlushToHTML\n}\n\nconst MemoCssBaseline = React.memo(CssBaseline) as MemoCssBaselineComponent<\n  React.PropsWithChildren<unknown>\n>\nMemoCssBaseline.flush = flush\nMemoCssBaseline.flushToHTML = flushToHTML\n\nexport default MemoCssBaseline\n"
  },
  {
    "path": "components/css-baseline/index.ts",
    "content": "export { default } from './css-baseline'\n"
  },
  {
    "path": "components/description/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Description should render correctly 1`] = `ReactWrapper {}`;\n"
  },
  {
    "path": "components/description/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Description } from 'components'\n\ndescribe('Description', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Description title=\"title\" />)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render react-node on title', () => {\n    let wrapper = mount(<Description title={<p>p</p>} />)\n    expect(wrapper.find('p').length).not.toBe(0)\n\n    wrapper = mount(<Description title={<h1>p</h1>} />)\n    expect(wrapper.find('h1').length).not.toBe(0)\n  })\n\n  it('should render react-node on content', () => {\n    let wrapper = mount(<Description content={<p>p</p>} />)\n    expect(wrapper.find('p').length).not.toBe(0)\n\n    wrapper = mount(<Description content={<h1>p</h1>} />)\n    expect(wrapper.find('h1').length).not.toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/description/description.tsx",
    "content": "import React, { ReactNode } from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  title?: ReactNode | string\n  content?: ReactNode | string\n  className?: string\n}\n\nconst defaultProps = {\n  title: 'Title' as ReactNode | string,\n  content: '' as ReactNode | string,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type DescriptionProps = Props & NativeAttrs\n\nconst DescriptionComponent: React.FC<DescriptionProps> = ({\n  title,\n  content,\n  className,\n  ...props\n}: DescriptionProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const classes = useClasses('description', className)\n\n  return (\n    <dl className={classes} {...props}>\n      <dt>{title}</dt>\n      <dd>{content}</dd>\n\n      <style jsx>{`\n        .description {\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        dt {\n          font-size: 0.75em;\n          line-height: 1em;\n          margin-bottom: 0.5em;\n          text-transform: uppercase;\n          white-space: nowrap;\n          color: ${theme.palette.accents_5};\n          font-weight: 500;\n          display: flex;\n        }\n\n        dd {\n          font-size: 0.875em;\n          margin: 0;\n          line-height: 1.1em;\n          color: ${theme.palette.foreground};\n          font-weight: 500;\n        }\n\n        dd :global(p),\n        dt :global(p) {\n          margin: 0;\n        }\n      `}</style>\n    </dl>\n  )\n}\n\nDescriptionComponent.defaultProps = defaultProps\nDescriptionComponent.displayName = 'GeistDescription'\nconst Description = withScale(DescriptionComponent)\nexport default Description\n"
  },
  {
    "path": "components/description/index.ts",
    "content": "import Description from './description'\n\nexport type { DescriptionProps } from './description'\nexport default Description\n"
  },
  {
    "path": "components/display/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Display should render correctly 1`] = `ReactWrapper {}`;\n\nexports[`Display should support react-node 1`] = `ReactWrapper {}`;\n\nexports[`Display should work with shadow and width 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"display\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"content\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"display\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"caption\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"h1\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"h1\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: max-content;\n          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 2.5em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"caption\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"h1\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"h1\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: max-content;\n          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 2.5em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"display\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: max-content;\n          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 2.5em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"caption\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"h1\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"h1\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"display\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"display\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"display\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"caption\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"h1\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h1\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 50px;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: 50px;\n          box-shadow: none;\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 1.3em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"caption\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"h1\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"h1\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 50px;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: 50px;\n          box-shadow: none;\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 1.3em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"display\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 50px;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: 50px;\n          box-shadow: none;\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 1.3em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"caption\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"h1\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h1\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"display\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"display\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"content\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"display\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"caption\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"h1\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"h1\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 50px;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: 50px;\n          box-shadow: none;\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 1.3em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"caption\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"h1\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"h1\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 50px;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: 50px;\n          box-shadow: none;\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 1.3em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"display\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 50px;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: 50px;\n          box-shadow: none;\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 1.3em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"caption\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"h1\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"h1\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"display\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"display\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"content\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"display\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"caption\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"h1\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h1\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: max-content;\n          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 2.5em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"caption\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"h1\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"h1\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: max-content;\n          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 2.5em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"content\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"display\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: calc(0.875 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: calc(2.5 * 16px) auto calc(2.5 * 16px)\n            auto;\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: max-content;\n          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: #666;\n          margin: 2.5em auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"caption\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"h1\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"h1\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"content\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"display\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/display/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Display } from 'components'\n\ndescribe('Display', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Display caption=\"caption\">display</Display>)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support react-node', () => {\n    const wrapper = mount(<Display caption={<h1>h1</h1>}>display</Display>)\n    expect(wrapper).toMatchSnapshot()\n    expect(wrapper.find('h1').length).not.toBe(0)\n  })\n\n  it('should work with shadow and width', () => {\n    const wrapper = render(\n      <div>\n        <Display caption={<h1>h1</h1>} shadow>\n          display\n        </Display>\n        <Display caption={<h1>h1</h1>} width=\"50px\">\n          display\n        </Display>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "components/display/display.tsx",
    "content": "import React, { ReactNode, useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  caption?: ReactNode | string\n  shadow?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  caption: '' as ReactNode | string,\n  shadow: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type DisplayProps = Props & NativeAttrs\n\nconst DisplayComponent: React.FC<React.PropsWithChildren<DisplayProps>> = ({\n  children,\n  caption,\n  shadow,\n  className,\n  ...props\n}: React.PropsWithChildren<DisplayProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const classes = useClasses('display', className)\n  const showShadow = useMemo(() => shadow && theme.type !== 'dark', [theme.type, shadow])\n\n  return (\n    <div className={classes} {...props}>\n      <div className=\"content\">{children}</div>\n      <div className=\"caption\">{caption}</div>\n\n      <style jsx>{`\n        .display {\n          display: block;\n          max-width: 100%;\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(2.5)} ${SCALES.mr(0, 'auto')} ${SCALES.mb(2.5)}\n            ${SCALES.ml(0, 'auto')};\n        }\n\n        .content {\n          display: block;\n          margin: 0 auto;\n          border-radius: 4px;\n          overflow: hidden;\n          width: ${SCALES.width(1, 'max-content')};\n          box-shadow: ${showShadow ? theme.expressiveness.shadowLarge : 'none'};\n          max-width: 100%;\n        }\n\n        .content :global(pre) {\n          margin: 0;\n          transition: min-width ease 0.2s;\n        }\n\n        .content :global(img) {\n          display: block;\n        }\n\n        .caption {\n          font-size: inherit;\n          line-height: 1.5em;\n          color: ${theme.palette.accents_5};\n          margin: ${shadow ? '2.5em' : '1.3em'} auto 0;\n          text-align: center;\n          max-width: 85%;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nDisplayComponent.defaultProps = defaultProps\nDisplayComponent.displayName = 'GeistDisplay'\nconst Display = withScale(DisplayComponent)\nexport default Display\n"
  },
  {
    "path": "components/display/index.ts",
    "content": "import Display from './display'\n\nexport type { DisplayProps } from './display'\nexport default Display\n"
  },
  {
    "path": "components/divider/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Divider should render correctly 1`] = `ReactWrapper {}`;\n\nexports[`Divider should support float 1`] = `ReactWrapper {}`;\n\nexports[`Divider should work with align and volume 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"text start\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"start\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"text start\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"start\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"text start\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"left\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text start\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"left\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"divider\",\n              \"role\": \"separator\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"text end\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"end\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"text end\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"end\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"divider\",\n                \"role\": \"separator\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"text start\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"start\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"text start\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"start\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"text start\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"left\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"text start\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"left\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"text end\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"end\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text end\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"end\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"divider\",\n              \"role\": \"separator\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"text start\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"start\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"text start\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"start\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"text start\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"start\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text start\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"start\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"text end\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"end\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"text end\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"end\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"text start\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"start\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text start\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"start\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"text start\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"left\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text start\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"left\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"divider\",\n              \"role\": \"separator\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"text start\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"start\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"text start\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"start\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"text start\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"start\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.125 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"text start\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"start\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"text end\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"end\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"text end\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"end\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"divider\",\n              \"role\": \"separator\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"text start\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"left\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"text start\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"left\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"divider\",\n                \"role\": \"separator\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"text start\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"start\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"text start\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"start\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n                \"role\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Divider should work with type 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #666;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #666;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #f7b955;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #f7b955;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"divider\",\n              \"role\": \"separator\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #000;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #f7b955;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #f7b955;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #000;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #666;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #666;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #000;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #f7b955;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #f7b955;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"divider\",\n              \"role\": \"separator\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #666;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #666;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n              \"role\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Divider should work with w and h 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: calc(3 * 16px);\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.1875 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"divider\",\n          \"role\": \"separator\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: calc(0.1875 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"divider\",\n            \"role\": \"separator\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .divider {\n          max-width: 100%;\n          background-color: #eaeaea;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: calc(3 * 16px);\n          height: calc(0.0625 * 16px);\n          padding: 0 0 0 0;\n          margin: calc(0.5 * 16px) 0 calc(0.5 * 16px) 0;\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: #fff;\n          color: #000;\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n            \"role\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n          \"role\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/divider/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Divider } from 'components'\n\ndescribe('Divider', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Divider />)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with w and h', () => {\n    const wrapper = render(\n      <div>\n        <Divider w={3} />\n        <Divider h={3} />\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should work with type', () => {\n    const wrapper = render(\n      <div>\n        <Divider type=\"secondary\" />\n        <Divider type=\"warning\" />\n        <Divider type=\"dark\" />\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should work with align and volume', () => {\n    const wrapper = render(\n      <div>\n        <Divider align=\"start\">start</Divider>\n        <Divider align=\"left\">left</Divider>\n        <Divider align=\"end\">end</Divider>\n        <Divider align=\"start\" h={2}>\n          start\n        </Divider>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should support float', () => {\n    const wrapper = mount(\n      <div>\n        <Divider w={1.1} h={2.5} />\n        <Divider h={2.5} />\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/divider/divider.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { DividerAlign, SnippetTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type DividerTypes = SnippetTypes\n\ninterface Props {\n  type?: DividerTypes\n  align?: DividerAlign\n  className?: string\n}\n\nconst defaultProps = {\n  align: 'center' as DividerAlign,\n  type: 'default' as DividerTypes,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type DividerProps = Props & NativeAttrs\n\nconst getColor = (type: DividerTypes, palette: GeistUIThemesPalette) => {\n  const colors: { [key in DividerTypes]: string } = {\n    default: palette.border,\n    lite: palette.accents_1,\n    success: palette.successLight,\n    warning: palette.warningLight,\n    error: palette.errorLight,\n    secondary: palette.secondary,\n    dark: palette.foreground,\n  }\n  return colors[type]\n}\n\nconst DividerComponent: React.FC<React.PropsWithChildren<DividerProps>> = ({\n  type,\n  align,\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<DividerProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const classes = useClasses('divider', className)\n  const color = useMemo(() => getColor(type, theme.palette), [type, theme.palette])\n  const alignClassName = useMemo(() => {\n    if (!align || align === 'center') return ''\n    if (align === 'left' || align === 'start') return 'start'\n    return 'end'\n  }, [align])\n  const alignClasses = useClasses('text', alignClassName)\n  const textColor = type === 'default' ? theme.palette.foreground : color\n\n  return (\n    <div role=\"separator\" className={classes} {...props}>\n      {children && <span className={alignClasses}>{children}</span>}\n      <style jsx>{`\n        .divider {\n          max-width: 100%;\n          background-color: ${color};\n          position: relative;\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(0.0625)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0.5)} ${SCALES.mr(0)} ${SCALES.mb(0.5)} ${SCALES.ml(0)};\n        }\n\n        .text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          min-height: 100%;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          transform: translate(-50%, -50%);\n          padding: 0 0.75em;\n          font-size: inherit;\n          font-weight: bold;\n          text-transform: capitalize;\n          background-color: ${theme.palette.background};\n          color: ${textColor};\n          z-index: 10;\n        }\n\n        .text.start {\n          transform: translateY(-50%);\n          left: 7%;\n        }\n\n        .text.end {\n          transform: translateY(-50%);\n          left: auto;\n          right: 7%;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nDividerComponent.defaultProps = defaultProps\nDividerComponent.displayName = 'GeistDivider'\nconst Divider = withScale(DividerComponent)\nexport default Divider\n"
  },
  {
    "path": "components/divider/index.ts",
    "content": "import Divider from './divider'\n\nexport type { DividerProps, DividerTypes } from './divider'\nexport type { DividerAlign } from '../utils/prop-types'\nexport default Divider\n"
  },
  {
    "path": "components/dot/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Dot should render correctly 1`] = `ReactWrapper {}`;\n\nexports[`Dot should supports types 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"dot\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"icon\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"label\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"dot\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"dot\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"icon\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"dot\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"label\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"icon\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"label\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"icon\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"dot\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"icon\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"label\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"dot\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"dot\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"icon\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"dot\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"dot\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"icon\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"label\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"dot\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"dot\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"dot\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"icon\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"dot\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"icon\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"label\",\n            },\n            \"children\": Array [],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #e00;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"dot\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"label\",\n              },\n              \"children\": Array [],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"dot\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"icon\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"label\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #eaeaea;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"icon\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"dot\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"icon\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"label\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"label\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"icon\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"label\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"icon\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/dot/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Dot } from 'components'\n\ndescribe('Dot', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Dot />)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should supports types', () => {\n    const wrapper = render(\n      <div>\n        <Dot type=\"success\" />\n        <Dot type=\"secondary\" />\n        <Dot type=\"warning\" />\n        <Dot type=\"error\" />\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should be render text', () => {\n    const wrapper = mount(<Dot>test</Dot>)\n    expect(wrapper.text()).toContain('test')\n  })\n})\n"
  },
  {
    "path": "components/dot/dot.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { NormalTypes } from '../utils/prop-types'\nimport { GeistUIThemes } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type DotTypes = NormalTypes\ninterface Props {\n  type?: DotTypes\n  className?: string\n}\n\nconst defaultProps = {\n  type: 'default' as DotTypes,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type DotProps = Props & NativeAttrs\n\nconst getColor = (type: DotTypes, theme: GeistUIThemes): string => {\n  const colors: { [key in DotTypes]?: string } = {\n    default: theme.palette.accents_2,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    error: theme.palette.error,\n  }\n  return colors[type] || (colors.default as string)\n}\n\nconst DotComponent: React.FC<React.PropsWithChildren<DotProps>> = ({\n  type,\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<DotProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const color = useMemo(() => getColor(type, theme), [type, theme])\n  return (\n    <span className={useClasses('dot', className)} {...props}>\n      <span className=\"icon\" />\n      <span className=\"label\">{children}</span>\n      <style jsx>{`\n        .dot {\n          display: inline-flex;\n          align-items: center;\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n        .icon {\n          width: 0.625em;\n          height: 0.625em;\n          min-width: calc(0.625 * 12px);\n          min-height: calc(0.625 * 12px);\n          line-height: 0.625em;\n          border-radius: 50%;\n          background-color: ${color};\n          user-select: none;\n        }\n        .label {\n          margin-left: 0.5em;\n          font-size: 1em;\n          line-height: 1em;\n          text-transform: capitalize;\n        }\n      `}</style>\n    </span>\n  )\n}\n\nDotComponent.defaultProps = defaultProps\nDotComponent.displayName = 'GeistDot'\nconst Dot = withScale(DotComponent)\nexport default Dot\n"
  },
  {
    "path": "components/dot/index.ts",
    "content": "import Dot from './dot'\n\nexport type { DotProps, DotTypes } from './dot'\nexport default Dot\n"
  },
  {
    "path": "components/drawer/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Drawer customization should be supported 1`] = `\n\"<div class=\\\\\"wrapper right test-class  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab start\\\\\" aria-hidden=\\\\\"true\\\\\"></div><h2 class=\\\\\"\\\\\">Modal</h2><style>\n        h2 {\n          line-height: 1.6;\n          font-weight: normal;\n          text-align: center;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          align-items: center;\n          word-break: break-word;\n          text-transform: capitalize;\n          font-size: calc(1.5 * 16px);\n          color: #000;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab end\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: auto;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: calc(3 * 6px);\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(100%, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1);\n            font-size: calc(1 * 16px);\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n          .top,\n          .bottom {\n            width: 100px;\n            height: auto;\n          }\n          .left,\n          .right {\n            width: 100px;\n            height: 100%;\n          }\n          .top {\n            bottom: auto;\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          .left {\n            right: auto;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .bottom {\n            top: auto;\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .right {\n            left: auto;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(100%, 0, 0);\n          }\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n          }\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1);\n          }\n          .wrapper-leave-active {\n            opacity: 0.4;\n            transform: translate3d(100%, 0, 0);\n          }\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div>\"\n`;\n\nexports[`Drawer should render correctly 1`] = `\n\"<div class=\\\\\"backdrop  backdrop-wrapper-enter\\\\\"><div class=\\\\\"layer\\\\\"></div><div class=\\\\\"position\\\\\"><div class=\\\\\"wrapper right  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab start\\\\\" aria-hidden=\\\\\"true\\\\\"></div><h2 class=\\\\\"\\\\\">Drawer</h2><style>\n        h2 {\n          line-height: 1.6;\n          font-weight: normal;\n          text-align: center;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          align-items: center;\n          word-break: break-word;\n          text-transform: capitalize;\n          font-size: calc(1.5 * 16px);\n          color: #000;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style><p class=\\\\\"\\\\\">This is a drawer</p><style>\n        p {\n          font-weight: normal;\n          display: inline-block;\n          text-align: center;\n          word-break: break-word;\n          text-transform: uppercase;\n          color: #666;\n          font-size: calc(0.875 * 16px);\n          line-height: 1.5em;\n          width: auto;\n          height: 1.5em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style><div class=\\\\\"content\\\\\"><p>Some content contained within the drawer.</p></div><style>\n        .content {\n          position: relative;\n          text-align: left;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.3125 * 16px) calc(1.3125 * 16px) calc(0.6625 * 16px)\n            calc(1.3125 * 16px);\n          margin: 0\n            calc(var(--modal-wrapper-padding-right) * -1)\n            0\n            calc(var(--modal-wrapper-padding-left) * -1);\n        }\n\n        .content > :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content > :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      </style><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab end\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: auto;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: calc(3 * 6px);\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(100%, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1);\n            font-size: calc(1 * 16px);\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n          .top,\n          .bottom {\n            width: 100%;\n            height: auto;\n          }\n          .left,\n          .right {\n            width: auto;\n            height: 100%;\n          }\n          .top {\n            bottom: auto;\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          .left {\n            right: auto;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .bottom {\n            top: auto;\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .right {\n            left: auto;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(100%, 0, 0);\n          }\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n          }\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1);\n          }\n          .wrapper-leave-active {\n            opacity: 0.4;\n            transform: translate3d(100%, 0, 0);\n          }\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div></div><style>\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: 100%;\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: 0.25;\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          </style></div>\"\n`;\n\nexports[`Drawer should work correctly with different placement 1`] = `\n\"<div class=\\\\\"backdrop  backdrop-wrapper-enter\\\\\"><div class=\\\\\"layer\\\\\"></div><div class=\\\\\"position\\\\\"><div class=\\\\\"wrapper top  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab start\\\\\" aria-hidden=\\\\\"true\\\\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab end\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: auto;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: calc(3 * 6px);\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(0, -100%, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1);\n            font-size: calc(1 * 16px);\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n          .top,\n          .bottom {\n            width: 100%;\n            height: auto;\n          }\n          .left,\n          .right {\n            width: auto;\n            height: 100%;\n          }\n          .top {\n            bottom: auto;\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          .left {\n            right: auto;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .bottom {\n            top: auto;\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .right {\n            left: auto;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(0, -100%, 0);\n          }\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n          }\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1);\n          }\n          .wrapper-leave-active {\n            opacity: 0.4;\n            transform: translate3d(0, -100%, 0);\n          }\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div></div><style>\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: 100%;\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: 0.25;\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          </style></div>\"\n`;\n\nexports[`Drawer should work correctly with different placement 2`] = `\n\"<div class=\\\\\"backdrop  backdrop-wrapper-enter\\\\\"><div class=\\\\\"layer\\\\\"></div><div class=\\\\\"position\\\\\"><div class=\\\\\"wrapper right  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab start\\\\\" aria-hidden=\\\\\"true\\\\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab end\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: auto;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: calc(3 * 6px);\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(100%, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1);\n            font-size: calc(1 * 16px);\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n          .top,\n          .bottom {\n            width: 100%;\n            height: auto;\n          }\n          .left,\n          .right {\n            width: auto;\n            height: 100%;\n          }\n          .top {\n            bottom: auto;\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          .left {\n            right: auto;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .bottom {\n            top: auto;\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .right {\n            left: auto;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(100%, 0, 0);\n          }\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n          }\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1);\n          }\n          .wrapper-leave-active {\n            opacity: 0.4;\n            transform: translate3d(100%, 0, 0);\n          }\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div></div><style>\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: 100%;\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: 0.25;\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          </style></div>\"\n`;\n\nexports[`Drawer should work correctly with different placement 3`] = `\n\"<div class=\\\\\"backdrop  backdrop-wrapper-enter\\\\\"><div class=\\\\\"layer\\\\\"></div><div class=\\\\\"position\\\\\"><div class=\\\\\"wrapper bottom  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab start\\\\\" aria-hidden=\\\\\"true\\\\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab end\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: auto;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: calc(3 * 6px);\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(0, 100%, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1);\n            font-size: calc(1 * 16px);\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n          .top,\n          .bottom {\n            width: 100%;\n            height: auto;\n          }\n          .left,\n          .right {\n            width: auto;\n            height: 100%;\n          }\n          .top {\n            bottom: auto;\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          .left {\n            right: auto;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .bottom {\n            top: auto;\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .right {\n            left: auto;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(0, 100%, 0);\n          }\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n          }\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1);\n          }\n          .wrapper-leave-active {\n            opacity: 0.4;\n            transform: translate3d(0, 100%, 0);\n          }\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div></div><style>\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: 100%;\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: 0.25;\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          </style></div>\"\n`;\n\nexports[`Drawer should work correctly with different placement 4`] = `\n\"<div class=\\\\\"backdrop  backdrop-wrapper-enter\\\\\"><div class=\\\\\"layer\\\\\"></div><div class=\\\\\"position\\\\\"><div class=\\\\\"wrapper left  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab start\\\\\" aria-hidden=\\\\\"true\\\\\"></div><p>Some content contained within the drawer.</p><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab end\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: auto;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: calc(3 * 6px);\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(-100%, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1);\n            font-size: calc(1 * 16px);\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n          .top,\n          .bottom {\n            width: 100%;\n            height: auto;\n          }\n          .left,\n          .right {\n            width: auto;\n            height: 100%;\n          }\n          .top {\n            bottom: auto;\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          .left {\n            right: auto;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .bottom {\n            top: auto;\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .right {\n            left: auto;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(-100%, 0, 0);\n          }\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n          }\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0, 0, 0);\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1);\n          }\n          .wrapper-leave-active {\n            opacity: 0.4;\n            transform: translate3d(-100%, 0, 0);\n          }\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div></div><style>\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: 100%;\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: 0.25;\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          </style></div>\"\n`;\n"
  },
  {
    "path": "components/drawer/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Drawer } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport { expectDrawerIsClosed, expectDrawerIsOpened } from './use-modal.test'\nimport userEvent from '@testing-library/user-event'\n\ndescribe('Drawer', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Drawer visible={true}>\n        <Drawer.Title>Drawer</Drawer.Title>\n        <Drawer.Subtitle>This is a drawer</Drawer.Subtitle>\n        <Drawer.Content>\n          <p>Some content contained within the drawer.</p>\n        </Drawer.Content>\n      </Drawer>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work correctly with different placement', () => {\n    const top = mount(\n      <Drawer visible={true} placement=\"top\">\n        <p>Some content contained within the drawer.</p>\n      </Drawer>,\n    )\n    expect(top.html()).toMatchSnapshot()\n    expect(() => top.unmount()).not.toThrow()\n\n    const right = mount(\n      <Drawer visible={true} placement=\"right\">\n        <p>Some content contained within the drawer.</p>\n      </Drawer>,\n    )\n    expect(right.html()).toMatchSnapshot()\n    expect(() => right.unmount()).not.toThrow()\n\n    const bottom = mount(\n      <Drawer visible={true} placement=\"bottom\">\n        <p>Some content contained within the drawer.</p>\n      </Drawer>,\n    )\n    expect(bottom.html()).toMatchSnapshot()\n    expect(() => bottom.unmount()).not.toThrow()\n\n    const left = mount(\n      <Drawer visible={true} placement=\"left\">\n        <p>Some content contained within the drawer.</p>\n      </Drawer>,\n    )\n    expect(left.html()).toMatchSnapshot()\n    expect(() => left.unmount()).not.toThrow()\n  })\n\n  it('should trigger event when drawer changed', async () => {\n    const closeHandler = jest.fn()\n    const wrapper = mount(\n      <Drawer onClose={closeHandler}>\n        <Drawer.Title>Modal</Drawer.Title>\n      </Drawer>,\n    )\n    expectDrawerIsClosed(wrapper)\n\n    wrapper.setProps({ visible: true })\n    await updateWrapper(wrapper, 350)\n    expectDrawerIsOpened(wrapper)\n\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 500)\n    expectDrawerIsClosed(wrapper)\n    expect(closeHandler).toHaveBeenCalled()\n  })\n\n  it('should disable backdrop event', async () => {\n    const closeHandler = jest.fn()\n    const wrapper = mount(\n      <Drawer visible={true} disableBackdropClick onClose={closeHandler}>\n        <Drawer.Title>Modal</Drawer.Title>\n      </Drawer>,\n    )\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 500)\n    expectDrawerIsOpened(wrapper)\n    expect(closeHandler).not.toHaveBeenCalled()\n  })\n\n  it('customization should be supported', () => {\n    const wrapper = mount(\n      <Drawer visible={true} width=\"100px\" wrapClassName=\"test-class\">\n        <Drawer.Title>Modal</Drawer.Title>\n      </Drawer>,\n    )\n    const html = wrapper.find('.wrapper').html()\n    expect(html).toMatchSnapshot()\n    expect(wrapper.find('.wrapper').at(0).getDOMNode()).toHaveClass('test-class')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('focus should only be switched within modal', async () => {\n    const wrapper = mount(\n      <Drawer visible={true} width=\"100px\" wrapClassName=\"test-class\">\n        <button id=\"button\" />\n      </Drawer>,\n    )\n    const tabStart = wrapper.find('.hide-tab').at(0).getDOMNode()\n    const tabEnd = wrapper.find('.hide-tab').at(1).getDOMNode()\n    const button = wrapper.find('#button').at(0).getDOMNode()\n    const focusTrap = wrapper.find('.wrapper').at(0).getDOMNode()\n\n    expect(tabStart).toHaveFocus()\n    userEvent.tab({ focusTrap })\n    expect(button).toHaveFocus()\n    userEvent.tab()\n    expect(tabEnd).toHaveFocus()\n    userEvent.tab()\n    expect(tabStart).toHaveFocus()\n\n    userEvent.tab({ shift: true, focusTrap })\n    expect(tabEnd).toHaveFocus()\n    userEvent.tab({ shift: true, focusTrap })\n    expect(button).toHaveFocus()\n    userEvent.tab({ shift: true, focusTrap })\n    expect(tabStart).toHaveFocus()\n  })\n\n  it('should close drawer when keyboard event is triggered', async () => {\n    const wrapper = mount(\n      <Drawer visible={true}>\n        <Drawer.Title>Drawer</Drawer.Title>\n      </Drawer>,\n    )\n    expectDrawerIsOpened(wrapper)\n    userEvent.keyboard('{esc}')\n    await updateWrapper(wrapper, 500)\n    expectDrawerIsClosed(wrapper)\n  })\n\n  it('should prevent close modal when keyboard is false', async () => {\n    const wrapper = mount(\n      <Drawer visible={true} keyboard={false}>\n        <Drawer.Title>Drawer</Drawer.Title>\n      </Drawer>,\n    )\n    expectDrawerIsOpened(wrapper)\n    userEvent.keyboard('{esc}')\n    await updateWrapper(wrapper, 500)\n    expectDrawerIsOpened(wrapper)\n  })\n})\n"
  },
  {
    "path": "components/drawer/__tests__/use-modal.test.tsx",
    "content": "import React, { useEffect } from 'react'\nimport { mount, ReactWrapper } from 'enzyme'\nimport { Drawer, useModal } from 'components'\nimport { updateWrapper } from 'tests/utils'\n\nexport const expectDrawerIsOpened = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.position').length).not.toBe(0)\n}\n\nexport const expectDrawerIsClosed = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.position').length).toBe(0)\n}\n\ndescribe('UseModal & Drawer', () => {\n  it('should follow change with use-modal', async () => {\n    const MockModal: React.FC<{ show?: boolean }> = ({ show }) => {\n      const { setVisible, bindings } = useModal()\n      useEffect(() => {\n        if (show !== undefined) setVisible(show)\n      }, [show])\n      return (\n        <Drawer {...bindings}>\n          <Drawer.Title>Drawer</Drawer.Title>\n        </Drawer>\n      )\n    }\n\n    const wrapper = mount(<MockModal />)\n    wrapper.setProps({ show: true })\n    await updateWrapper(wrapper, 300)\n    expectDrawerIsOpened(wrapper)\n\n    wrapper.setProps({ show: false })\n    await updateWrapper(wrapper, 500)\n    expectDrawerIsClosed(wrapper)\n  })\n})\n"
  },
  {
    "path": "components/drawer/drawer-wrapper.tsx",
    "content": "import React, { useEffect, useMemo, useRef } from 'react'\nimport useScale from '../use-scale'\nimport useTheme from '../use-theme'\nimport CssTransition from '../shared/css-transition'\nimport { isChildElement } from '../utils/collections'\nimport { DrawerPlacement, getDrawerTransform } from './helper'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n  visible?: boolean\n  placement: DrawerPlacement\n}\n\nconst defaultProps = {\n  className: '',\n  visible: false,\n}\n\nexport type DrawerWrapperProps = Props\n\nconst DrawerWrapper: React.FC<React.PropsWithChildren<DrawerWrapperProps>> = ({\n  className,\n  children,\n  visible,\n  placement,\n  ...props\n}: React.PropsWithChildren<DrawerWrapperProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const modalContent = useRef<HTMLDivElement>(null)\n  const tabStart = useRef<HTMLDivElement>(null)\n  const tabEnd = useRef<HTMLDivElement>(null)\n  const transform = useMemo(() => getDrawerTransform(placement), [placement])\n  const classes = useClasses('wrapper', placement, className)\n\n  useEffect(() => {\n    if (!visible) return\n    const activeElement = document.activeElement\n    const isChild = isChildElement(modalContent.current, activeElement)\n    if (isChild) return\n    tabStart.current && tabStart.current.focus()\n  }, [visible])\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const isTabDown = event.keyCode === 9\n    if (!visible || !isTabDown) return\n    const activeElement = document.activeElement\n    if (event.shiftKey) {\n      if (activeElement === tabStart.current) {\n        tabEnd.current && tabEnd.current.focus()\n      }\n    } else {\n      if (activeElement === tabEnd.current) {\n        tabStart.current && tabStart.current.focus()\n      }\n    }\n  }\n\n  return (\n    <CssTransition name=\"wrapper\" visible={visible} clearTime={300}>\n      <div\n        className={classes}\n        role=\"dialog\"\n        tabIndex={-1}\n        onKeyDown={onKeyDown}\n        ref={modalContent}\n        {...props}>\n        <div tabIndex={0} className=\"hide-tab start\" aria-hidden=\"true\" ref={tabStart} />\n        {children}\n        <div tabIndex={0} className=\"hide-tab end\" aria-hidden=\"true\" ref={tabEnd} />\n        <style jsx>{`\n          .wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: auto;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n            background-color: ${theme.palette.background};\n            color: ${theme.palette.foreground};\n            border-radius: calc(3 * ${theme.layout.radius});\n            box-shadow: ${theme.expressiveness.shadowLarge};\n            opacity: 0;\n            outline: none;\n            transform: ${transform.initial};\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1);\n            font-size: ${SCALES.font(1)};\n            --modal-wrapper-padding-left: ${SCALES.pl(1.3125)};\n            --modal-wrapper-padding-right: ${SCALES.pr(1.3125)};\n            padding: ${SCALES.pt(1.3125)} var(--modal-wrapper-padding-right)\n              ${SCALES.pb(1.3125)} var(--modal-wrapper-padding-left);\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n          .top,\n          .bottom {\n            width: ${SCALES.width(1, '100%')};\n            height: ${SCALES.height(1, 'auto')};\n          }\n          .left,\n          .right {\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, '100%')};\n          }\n          .top {\n            bottom: auto;\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          .left {\n            right: auto;\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .bottom {\n            top: auto;\n            border-bottom-left-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .right {\n            left: auto;\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .wrapper-enter {\n            opacity: 0;\n            transform: ${transform.hidden};\n          }\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: ${transform.visible};\n          }\n          .wrapper-leave {\n            opacity: 1;\n            transform: ${transform.visible};\n            transition: opacity, transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1);\n          }\n          .wrapper-leave-active {\n            opacity: 0.4;\n            transform: ${transform.hidden};\n          }\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        `}</style>\n      </div>\n    </CssTransition>\n  )\n}\n\nDrawerWrapper.defaultProps = defaultProps\nDrawerWrapper.displayName = 'GeistDrawerWrapper'\nexport default DrawerWrapper\n"
  },
  {
    "path": "components/drawer/drawer.tsx",
    "content": "import React, { MouseEvent, useEffect, useState } from 'react'\nimport { withScale } from '../use-scale'\nimport usePortal from '../utils/use-portal'\nimport useBodyScroll from '../utils/use-body-scroll'\nimport useKeyboard, { KeyCode } from '../use-keyboard'\nimport { createPortal } from 'react-dom'\nimport Backdrop from '../shared/backdrop'\nimport { DrawerPlacement } from './helper'\nimport DrawerWrapper from './drawer-wrapper'\n\ninterface Props {\n  visible?: boolean\n  keyboard?: boolean\n  disableBackdropClick?: boolean\n  onClose?: () => void\n  onContentClick?: (event: MouseEvent<HTMLElement>) => void\n  wrapClassName?: string\n  placement?: DrawerPlacement\n}\n\nconst defaultProps = {\n  wrapClassName: '',\n  keyboard: true,\n  disableBackdropClick: false,\n  placement: 'right' as DrawerPlacement,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type DrawerProps = Props & NativeAttrs\n\nconst DrawerComponent: React.FC<React.PropsWithChildren<DrawerProps>> = ({\n  visible: customVisible,\n  keyboard,\n  disableBackdropClick,\n  onClose,\n  onContentClick,\n  wrapClassName,\n  children,\n  ...props\n}: React.PropsWithChildren<DrawerProps> & typeof defaultProps) => {\n  const portal = usePortal('drawer')\n  const [visible, setVisible] = useState<boolean>(false)\n  const [, setBodyHidden] = useBodyScroll(null, { delayReset: 300 })\n\n  const closeDrawer = () => {\n    onClose && onClose()\n    setVisible(false)\n    setBodyHidden(false)\n  }\n\n  useEffect(() => {\n    if (typeof customVisible === 'undefined') return\n    setVisible(customVisible)\n    setBodyHidden(customVisible)\n  }, [customVisible])\n\n  const { bindings } = useKeyboard(\n    () => {\n      keyboard && closeDrawer()\n    },\n    KeyCode.Escape,\n    {\n      disableGlobalEvent: true,\n    },\n  )\n\n  const closeFromBackdrop = () => {\n    if (disableBackdropClick) return\n    closeDrawer()\n  }\n\n  if (!portal) return null\n  return createPortal(\n    <Backdrop\n      onClick={closeFromBackdrop}\n      onContentClick={onContentClick}\n      visible={visible}\n      width=\"100%\"\n      {...bindings}>\n      <DrawerWrapper visible={visible} className={wrapClassName} {...props}>\n        {children}\n      </DrawerWrapper>\n    </Backdrop>,\n    portal,\n  )\n}\n\nDrawerComponent.defaultProps = defaultProps\nDrawerComponent.displayName = 'GeistDrawer'\nconst Drawer = withScale(DrawerComponent)\nexport default Drawer\n"
  },
  {
    "path": "components/drawer/helper.ts",
    "content": "import { tuple } from '../utils/prop-types'\n\nconst drawerPlacement = tuple('top', 'right', 'bottom', 'left')\nexport type DrawerPlacement = typeof drawerPlacement[number]\n\nexport type DrawerTranslateItem = {\n  initial: string\n  hidden: string\n  visible: string\n}\n\nexport const getDrawerTransform = (placement: DrawerPlacement): DrawerTranslateItem => {\n  const translates: Record<DrawerPlacement, DrawerTranslateItem> = {\n    top: {\n      initial: 'translate3d(0, -100%, 0)',\n      hidden: 'translate3d(0, -100%, 0)',\n      visible: 'translate3d(0, 0, 0)',\n    },\n    left: {\n      initial: 'translate3d(-100%, 0, 0)',\n      hidden: 'translate3d(-100%, 0, 0)',\n      visible: 'translate3d(0, 0, 0)',\n    },\n    bottom: {\n      initial: 'translate3d(0, 100%, 0)',\n      hidden: 'translate3d(0, 100%, 0)',\n      visible: 'translate3d(0, 0, 0)',\n    },\n    right: {\n      initial: 'translate3d(100%, 0, 0)',\n      hidden: 'translate3d(100%, 0, 0)',\n      visible: 'translate3d(0, 0, 0)',\n    },\n  }\n  return translates[placement]\n}\n"
  },
  {
    "path": "components/drawer/index.ts",
    "content": "import Drawer from './drawer'\nimport ModalTitle from '../modal/modal-title'\nimport ModalSubtitle from '../modal/modal-subtitle'\nimport ModalContent from '../modal/modal-content'\n\nexport type DrawerComponentType = typeof Drawer & {\n  Title: typeof ModalTitle\n  Subtitle: typeof ModalSubtitle\n  Content: typeof ModalContent\n}\n;(Drawer as DrawerComponentType).Title = ModalTitle\n;(Drawer as DrawerComponentType).Subtitle = ModalSubtitle\n;(Drawer as DrawerComponentType).Content = ModalContent\n\nexport type { DrawerProps } from './drawer'\nexport type {\n  ModalTitleProps as DrawerTitleProps,\n  ModalSubtitleProps as DrawerSubtitleProps,\n  ModalContentProps as DrawerContentProps,\n} from '../modal'\nexport default Drawer as DrawerComponentType\n"
  },
  {
    "path": "components/fieldset/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Fieldset should render correctly 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"fieldset\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"content\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"title\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"title\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"subtitle\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"title\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"title\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"subtitle\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"title\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"subtitle\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"title\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"status\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Actions\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"Actions\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"status\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Actions\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"status\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"footer\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .fieldset {\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          overflow: hidden;\n          display: block;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"status\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"Actions\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"Actions\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"button\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"status\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"Actions\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"status\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"footer\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        .fieldset {\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          overflow: hidden;\n          display: block;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"content\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"title\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"title\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"title\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"subtitle\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"title\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        .fieldset {\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          overflow: hidden;\n          display: block;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"status\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Actions\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"Actions\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"button\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"status\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        footer {\n          background-color: #fafafa;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: #444;\n          padding: 8pt 16pt;\n          box-sizing: border-box;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(2.875 * 16px);\n          padding: calc(0.625 * 16px) calc(1.31 * 16px) calc(0.625 * 16px)\n            calc(1.31 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"Actions\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"button\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"status\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"footer\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"content\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"title\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"title\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"title\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"title\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"subtitle\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"title\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"title\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"subtitle\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"title\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"title\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"div\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .content {\n          width: 100%;\n          height: auto;\n          padding: calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px) calc(1.3 * 16px);\n          margin: 0 0 0 0;\n        }\n        .content :global(&gt; *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(&gt; *:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"subtitle\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"div\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"title\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"title\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"div\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/fieldset/__tests__/group.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Fieldset } from 'components'\n\ndescribe('Fieldset Group', () => {\n  it('should trigger callback when tab clicked', () => {\n    const callbcak = jest.fn()\n    const wrapper = mount(\n      <Fieldset.Group value=\"two\" onChange={callbcak}>\n        <Fieldset label=\"one\" value=\"one\">\n          one\n        </Fieldset>\n        <Fieldset label=\"two\" value=\"two\">\n          two\n        </Fieldset>\n      </Fieldset.Group>,\n    )\n\n    let active = wrapper.find('.group').find('.active')\n    expect(active.length).not.toBe(0)\n    expect(active.text()).toContain('two')\n\n    const firstBtn = wrapper.find('.group').find('button').at(0)\n    firstBtn.simulate('click')\n    active = wrapper.find('.group').find('.active')\n    expect(active.length).not.toBe(0)\n    expect(active.text()).toContain('one')\n\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should throw error when value duplicated', () => {\n    let errorMessage = ''\n    const errorSpy = jest\n      .spyOn(console, 'error')\n      .mockImplementation(msg => (errorMessage = msg))\n\n    mount(\n      <Fieldset.Group value=\"two\">\n        <Fieldset label=\"one\" value=\"one\">\n          one\n        </Fieldset>\n        <Fieldset label=\"two\" value=\"one\">\n          two\n        </Fieldset>\n      </Fieldset.Group>,\n    )\n\n    expect(errorMessage).not.toBe('')\n    errorSpy.mockRestore()\n  })\n\n  it('should throw error when label missing', () => {\n    let errorMessage = ''\n    const errorSpy = jest\n      .spyOn(console, 'error')\n      .mockImplementation(msg => (errorMessage = msg))\n\n    mount(\n      <Fieldset.Group value=\"one\">\n        <Fieldset>one</Fieldset>\n      </Fieldset.Group>,\n    )\n\n    expect(errorMessage).not.toBe('')\n    errorSpy.mockRestore()\n  })\n})\n"
  },
  {
    "path": "components/fieldset/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Fieldset } from 'components'\n\ndescribe('Fieldset', () => {\n  it('should mount correctly', () => {\n    const wrapper = mount(\n      <Fieldset>\n        <Fieldset.Title>title</Fieldset.Title>\n        <Fieldset.Subtitle>subtitle</Fieldset.Subtitle>\n        <Fieldset.Footer>\n          status\n          <button>Actions</button>\n        </Fieldset.Footer>\n      </Fieldset>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render correctly', () => {\n    const wrapper = render(\n      <Fieldset>\n        <Fieldset.Title>title</Fieldset.Title>\n        <Fieldset.Subtitle>subtitle</Fieldset.Subtitle>\n        <Fieldset.Footer>\n          status\n          <button>Actions</button>\n        </Fieldset.Footer>\n      </Fieldset>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('the component Fieldset.Content should be injected automatically', () => {\n    const fieldset = mount(\n      <Fieldset>\n        <Fieldset.Title>test-title</Fieldset.Title>\n        <Fieldset.Subtitle>test-subtitle</Fieldset.Subtitle>\n      </Fieldset>,\n    )\n    const content = mount(\n      <Fieldset>\n        <Fieldset.Content>\n          <Fieldset.Title>test-title</Fieldset.Title>\n          <Fieldset.Subtitle>test-subtitle</Fieldset.Subtitle>\n        </Fieldset.Content>\n      </Fieldset>,\n    )\n\n    expect(fieldset.html()).toEqual(content.html())\n    expect(() => content.unmount()).not.toThrow()\n  })\n\n  it('render children through props', () => {\n    const fieldset = mount(\n      <Fieldset>\n        <Fieldset.Title>test-title</Fieldset.Title>\n        <Fieldset.Subtitle>test-subtitle</Fieldset.Subtitle>\n      </Fieldset>,\n    )\n    const props = mount(<Fieldset title=\"test-title\" subtitle=\"test-subtitle\" />)\n    expect(fieldset.html()).toEqual(props.html())\n    expect(() => props.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/fieldset/fieldset-content.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type FieldsetContentProps = Props & NativeAttrs\n\nconst FieldsetContentComponent: React.FC<\n  React.PropsWithChildren<FieldsetContentProps>\n> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<FieldsetContentProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const classes = useClasses('content', className)\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n      <style jsx>{`\n        .content {\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(1.3)} ${SCALES.pr(1.3)} ${SCALES.pb(1.3)} ${SCALES.pl(1.3)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n        .content :global(> *:first-child) {\n          margin-top: 0;\n        }\n        .content :global(> *:last-child) {\n          margin-bottom: 0;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nFieldsetContentComponent.defaultProps = defaultProps\nFieldsetContentComponent.displayName = 'GeistFieldsetContent'\nconst FieldsetContent = withScale(FieldsetContentComponent)\nexport default FieldsetContent\n"
  },
  {
    "path": "components/fieldset/fieldset-context.ts",
    "content": "import React from 'react'\n\nexport interface FieldItem {\n  value: string\n  label: string\n}\n\nexport interface FieldsetConfig {\n  register?: (item: FieldItem) => void\n  currentValue: string\n  inGroup: boolean\n}\n\nconst defaultContext = {\n  inGroup: false,\n  currentValue: '',\n}\n\nexport const FieldsetContext = React.createContext<FieldsetConfig>(defaultContext)\n\nexport const useFieldset = (): FieldsetConfig =>\n  React.useContext<FieldsetConfig>(FieldsetContext)\n"
  },
  {
    "path": "components/fieldset/fieldset-footer.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type FieldsetFooterProps = Props & NativeAttrs\n\nconst FieldsetFooterComponent: React.FC<React.PropsWithChildren<FieldsetFooterProps>> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<FieldsetFooterProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n\n  return (\n    <footer className={className} {...props}>\n      {children}\n      <style jsx>{`\n        footer {\n          background-color: ${theme.palette.accents_1};\n          border-top: 1px solid ${theme.palette.border};\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          overflow: hidden;\n          color: ${theme.palette.accents_6};\n          padding: ${theme.layout.gapHalf} ${theme.layout.gap};\n          box-sizing: border-box;\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(2.875)};\n          padding: ${SCALES.pt(0.625)} ${SCALES.pr(1.31)} ${SCALES.pb(0.625)}\n            ${SCALES.pl(1.31)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </footer>\n  )\n}\n\nFieldsetFooterComponent.defaultProps = defaultProps\nFieldsetFooterComponent.displayName = 'GeistFieldsetFooter'\nconst FieldsetFooter = withScale(FieldsetFooterComponent)\nexport default FieldsetFooter\n"
  },
  {
    "path": "components/fieldset/fieldset-group.tsx",
    "content": "import React, { useCallback, useMemo, useState } from 'react'\nimport useTheme from '../use-theme'\nimport useCurrentState from '../utils/use-current-state'\nimport { FieldsetContext, FieldItem } from './fieldset-context'\nimport useWarning from '../utils/use-warning'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  value: string\n  className?: string\n  onChange?: (value: string) => void\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type FieldsetGroupProps = Props & NativeAttrs\n\nconst FieldsetGroupComponent: React.FC<React.PropsWithChildren<FieldsetGroupProps>> = ({\n  className,\n  children,\n  value,\n  onChange,\n  ...props\n}: React.PropsWithChildren<FieldsetGroupProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const [selfVal, setSelfVal] = useState<string>(value)\n  const [items, setItems, ref] = useCurrentState<FieldItem[]>([])\n  const classes = useClasses('group', className)\n\n  const register = (newItem: FieldItem) => {\n    const hasItem = ref.current.find(item => item.value === newItem.value)\n    if (hasItem) {\n      useWarning('The \"value\" of each \"Fieldset\" must be unique.', 'Fieldset')\n    }\n    setItems([...ref.current, newItem])\n  }\n\n  const providerValue = useMemo(\n    () => ({\n      currentValue: selfVal,\n      inGroup: true,\n      register,\n    }),\n    [selfVal],\n  )\n\n  const clickHandle = useCallback(\n    (nextValue: string) => {\n      setSelfVal(nextValue)\n      onChange && onChange(nextValue)\n    },\n    [onChange],\n  )\n\n  return (\n    <FieldsetContext.Provider value={providerValue}>\n      <div className={classes} {...props}>\n        <div className=\"group-tabs\">\n          {items.map(item => (\n            <button\n              onClick={() => clickHandle(item.value)}\n              key={item.value}\n              className={selfVal === item.value ? 'active' : ''}>\n              {item.label}\n            </button>\n          ))}\n        </div>\n        <div className=\"group-content\">{children}</div>\n        <style jsx>{`\n          .group {\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, 'auto')};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0, 0)} ${SCALES.ml(0)};\n          }\n          .group-tabs {\n            white-space: nowrap;\n            overflow-y: hidden;\n            overflow-x: auto;\n            font-size: ${SCALES.font(1)};\n            margin-bottom: -1px;\n          }\n\n          .group-content {\n            border-top-left-radius: 0;\n            overflow: hidden;\n          }\n\n          .group-content :global(.fieldset) {\n            border-top-left-radius: 0;\n          }\n\n          button {\n            height: 2.7em;\n            line-height: 2.7em;\n            text-align: center;\n            user-select: none;\n            color: ${theme.palette.accents_3};\n            background-color: ${theme.palette.accents_1};\n            font-size: 0.875em;\n            white-space: nowrap;\n            text-transform: capitalize;\n            -webkit-appearance: none;\n            cursor: pointer;\n            margin: 0;\n            padding: 0 1.45em;\n            overflow: hidden;\n            transition: all 0.2s ease 0s;\n            border-radius: 0;\n            border: 1px solid ${theme.palette.border};\n            text-decoration: none;\n            outline: none;\n          }\n\n          button.active {\n            border-bottom-color: transparent;\n            background-color: ${theme.palette.background};\n            color: ${theme.palette.foreground};\n            cursor: default;\n          }\n\n          button:first-of-type {\n            border-top-left-radius: ${theme.layout.radius};\n          }\n\n          button:last-of-type {\n            border-top-right-radius: ${theme.layout.radius};\n          }\n\n          button + button {\n            border-left: 0;\n          }\n        `}</style>\n      </div>\n    </FieldsetContext.Provider>\n  )\n}\n\nFieldsetGroupComponent.defaultProps = defaultProps\nFieldsetGroupComponent.displayName = 'GeistFieldsetGroup'\nconst FieldsetGroup = withScale(FieldsetGroupComponent)\nexport default FieldsetGroup\n"
  },
  {
    "path": "components/fieldset/fieldset-subtitle.tsx",
    "content": "import React from 'react'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>\nexport type FieldsetSubtitleProps = Props & NativeAttrs\n\nconst FieldsetSubtitle: React.FC<React.PropsWithChildren<FieldsetSubtitleProps>> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<FieldsetSubtitleProps> & typeof defaultProps) => {\n  return (\n    <>\n      <div className={className} {...props}>\n        {children}\n      </div>\n      <style jsx>{`\n        div {\n          font-size: 0.875em;\n          line-height: 1.6;\n          letter-spacing: -0.005625em;\n          margin: 0.75em 0;\n        }\n      `}</style>\n    </>\n  )\n}\n\nFieldsetSubtitle.defaultProps = defaultProps\nFieldsetSubtitle.displayName = 'GeistFieldsetSubtitle'\nexport default FieldsetSubtitle\n"
  },
  {
    "path": "components/fieldset/fieldset-title.tsx",
    "content": "import React from 'react'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>\nexport type FieldsetTitleProps = Props & NativeAttrs\n\nconst FieldsetTitle: React.FC<React.PropsWithChildren<FieldsetTitleProps>> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<FieldsetTitleProps> & typeof defaultProps) => {\n  const classes = useClasses('title', className)\n\n  return (\n    <>\n      <div className={classes} {...props}>\n        {children}\n      </div>\n      <style jsx>{`\n        .title {\n          line-height: 1.5;\n          display: inline-flex;\n          word-break: break-word;\n          font-weight: 600;\n          letter-spacing: -0.020625em;\n          font-size: 1.25em;\n          width: auto;\n        }\n      `}</style>\n    </>\n  )\n}\n\nFieldsetTitle.defaultProps = defaultProps\nFieldsetTitle.displayName = 'GeistFieldsetTitle'\nexport default FieldsetTitle\n"
  },
  {
    "path": "components/fieldset/fieldset.tsx",
    "content": "import React, { ReactNode, useEffect, useMemo, useState } from 'react'\nimport useTheme from '../use-theme'\nimport FieldsetTitle from './fieldset-title'\nimport FieldsetSubtitle from './fieldset-subtitle'\nimport FieldsetFooter from './fieldset-footer'\nimport FieldsetContent from './fieldset-content'\nimport { hasChild, pickChild } from '../utils/collections'\nimport { useFieldset } from './fieldset-context'\nimport useWarning from '../utils/use-warning'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  value?: string\n  label?: string\n  title?: string | ReactNode\n  subtitle?: string | ReactNode\n  className?: string\n}\n\nconst defaultProps = {\n  value: '',\n  label: '',\n  disabled: false,\n  title: '' as string | ReactNode,\n  subtitle: '' as string | ReactNode,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.FieldsetHTMLAttributes<any>, keyof Props>\nexport type FieldsetProps = Props & NativeAttrs\n\nconst FieldsetComponent: React.FC<React.PropsWithChildren<FieldsetProps>> = ({\n  className,\n  title,\n  subtitle,\n  children,\n  value,\n  label,\n  ...props\n}: React.PropsWithChildren<FieldsetProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { inGroup, currentValue, register } = useFieldset()\n  const [hidden, setHidden] = useState<boolean>(inGroup)\n  const classes = useClasses('fieldset', className)\n\n  const [withoutFooterChildren, FooterChildren] = pickChild(children, FieldsetFooter)\n  const hasTitle = hasChild(withoutFooterChildren, FieldsetTitle)\n  const hasSubtitle = hasChild(withoutFooterChildren, FieldsetSubtitle)\n  const hasContent = hasChild(withoutFooterChildren, FieldsetContent)\n\n  if (inGroup) {\n    if (!label) {\n      useWarning('Props \"label\" is required when in a group.', 'Fieldset Group')\n    }\n    if (!value || value === '') {\n      value = label\n    }\n\n    useEffect(() => {\n      register && register({ value, label })\n    }, [])\n\n    useEffect(() => {\n      // In a few cases, the user will set Fieldset state manually.\n      // If the user incorrectly set the state, Group component should ignore it.\n      /* istanbul ignore if */\n      if (!currentValue || currentValue === '') return\n      setHidden(currentValue !== value)\n    }, [currentValue])\n  }\n\n  const content = useMemo(\n    () => (\n      <>\n        {withoutFooterChildren}\n        {!hasTitle && title && <FieldsetTitle>{title}</FieldsetTitle>}\n        {!hasSubtitle && subtitle && <FieldsetSubtitle>{subtitle}</FieldsetSubtitle>}\n      </>\n    ),\n    [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle],\n  )\n\n  return (\n    <div className={classes} {...props}>\n      {hasContent ? content : <FieldsetContent>{content}</FieldsetContent>}\n      {FooterChildren && FooterChildren}\n      <style jsx>{`\n        .fieldset {\n          background-color: ${theme.palette.background};\n          border: 1px solid ${theme.palette.border};\n          border-radius: ${theme.layout.radius};\n          overflow: hidden;\n          display: ${hidden ? 'none' : 'block'};\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nFieldsetComponent.defaultProps = defaultProps\nFieldsetComponent.displayName = 'GeistFieldset'\nconst Fieldset = withScale(FieldsetComponent)\nexport default Fieldset\n"
  },
  {
    "path": "components/fieldset/index.ts",
    "content": "import Fieldset from './fieldset'\nimport FieldsetTitle from './fieldset-title'\nimport FieldsetSubtitle from './fieldset-subtitle'\nimport FieldsetFooter from './fieldset-footer'\nimport FieldsetGroup from './fieldset-group'\nimport FieldsetContent from './fieldset-content'\n\nexport type FieldsetComponentType = typeof Fieldset & {\n  Title: typeof FieldsetTitle\n  Subtitle: typeof FieldsetSubtitle\n  Footer: typeof FieldsetFooter\n  Group: typeof FieldsetGroup\n  Content: typeof FieldsetContent\n  Body: typeof FieldsetContent\n}\n;(Fieldset as FieldsetComponentType).Title = FieldsetTitle\n;(Fieldset as FieldsetComponentType).Subtitle = FieldsetSubtitle\n;(Fieldset as FieldsetComponentType).Footer = FieldsetFooter\n;(Fieldset as FieldsetComponentType).Group = FieldsetGroup\n;(Fieldset as FieldsetComponentType).Content = FieldsetContent\n;(Fieldset as FieldsetComponentType).Body = FieldsetContent\n\nexport type { FieldsetProps } from './fieldset'\nexport type { FieldsetTitleProps } from './fieldset-title'\nexport type { FieldsetSubtitleProps } from './fieldset-subtitle'\nexport type { FieldsetGroupProps } from './fieldset-group'\nexport type { FieldsetFooterProps } from './fieldset-footer'\nexport type { FieldsetContentProps } from './fieldset-content'\nexport default Fieldset as FieldsetComponentType\n"
  },
  {
    "path": "components/geist-provider/geist-provider.tsx",
    "content": "import React, { PropsWithChildren, useMemo, useState } from 'react'\nimport {\n  GeistUIContent,\n  defaultToastLayout,\n  GeistUIContextParams,\n  UpdateToastsFunction,\n  UpdateToastsIDFunction,\n  UpdateToastsLayoutFunction,\n} from '../utils/use-geist-ui-context'\nimport ThemeProvider from './theme-provider'\nimport useCurrentState from '../utils/use-current-state'\nimport ToastContainer from '../use-toasts/toast-container'\nimport { GeistUIThemes } from '../themes/presets'\n\nexport type GeistProviderProps = {\n  themes?: Array<GeistUIThemes>\n  themeType?: string | 'dark' | 'light'\n}\n\nconst GeistProvider: React.FC<PropsWithChildren<GeistProviderProps>> = ({\n  themes,\n  themeType,\n  children,\n}) => {\n  const [lastUpdateToastId, setLastUpdateToastId] =\n    useState<GeistUIContextParams['lastUpdateToastId']>(null)\n  const [toasts, setToasts, toastsRef] = useCurrentState<GeistUIContextParams['toasts']>(\n    [],\n  )\n  const [toastLayout, setToastLayout, toastLayoutRef] =\n    useCurrentState<GeistUIContextParams['toastLayout']>(defaultToastLayout)\n  const updateToasts: UpdateToastsFunction = fn => {\n    const nextToasts = fn(toastsRef.current)\n    setToasts(nextToasts)\n  }\n  const updateToastLayout: UpdateToastsLayoutFunction = fn => {\n    const nextLayout = fn(toastLayoutRef.current)\n    setToastLayout(nextLayout)\n  }\n  const updateLastToastId: UpdateToastsIDFunction = fn => {\n    setLastUpdateToastId(fn())\n  }\n\n  const initialValue = useMemo<GeistUIContextParams>(\n    () => ({\n      toasts,\n      toastLayout,\n      updateToasts,\n      lastUpdateToastId,\n      updateToastLayout,\n      updateLastToastId,\n    }),\n    [toasts, toastLayout, lastUpdateToastId],\n  )\n\n  return (\n    <GeistUIContent.Provider value={initialValue}>\n      <ThemeProvider themes={themes} themeType={themeType}>\n        {children}\n        <ToastContainer />\n      </ThemeProvider>\n    </GeistUIContent.Provider>\n  )\n}\n\nexport default GeistProvider\n"
  },
  {
    "path": "components/geist-provider/index.ts",
    "content": "import GeistProvider from './geist-provider'\n\nexport type { GeistProviderProps } from './geist-provider'\nexport default GeistProvider\n"
  },
  {
    "path": "components/geist-provider/theme-provider.tsx",
    "content": "import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react'\nimport Themes from '../themes'\nimport { GeistUIThemes } from '../themes/presets'\nimport { ThemeContext } from '../use-theme/theme-context'\nimport { AllThemesConfig, AllThemesContext } from '../use-all-themes/all-themes-context'\n\nexport interface Props {\n  themeType?: string\n  themes?: Array<GeistUIThemes>\n}\n\nconst ThemeProvider: React.FC<PropsWithChildren<Props>> = ({\n  children,\n  themeType,\n  themes = [],\n}) => {\n  const [allThemes, setAllThemes] = useState<AllThemesConfig>({\n    themes: Themes.getPresets(),\n  })\n\n  const currentTheme = useMemo<GeistUIThemes>(() => {\n    const theme = allThemes.themes.find(item => item.type === themeType)\n    if (theme) return theme\n    return Themes.getPresetStaticTheme()\n  }, [allThemes, themeType])\n\n  useEffect(() => {\n    if (!themes?.length) return\n    setAllThemes(last => {\n      const safeThemes = themes.filter(item => Themes.isAvailableThemeType(item.type))\n      const nextThemes = Themes.getPresets().concat(safeThemes)\n      return {\n        ...last,\n        themes: nextThemes,\n      }\n    })\n  }, [themes])\n\n  return (\n    <AllThemesContext.Provider value={allThemes}>\n      <ThemeContext.Provider value={currentTheme}>{children}</ThemeContext.Provider>\n    </AllThemesContext.Provider>\n  )\n}\n\nexport default ThemeProvider\n"
  },
  {
    "path": "components/grid/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Grid all breakpoint values should be supported 1`] = `\n\"<div class=\\\\\"item xs sm md lg xl mock\\\\\"><div class=\\\\\"item xs sm md lg xl mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 0;\n          max-width: 4.166666666666667%;\n          flex-basis: 4.166666666666667%;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 0;\n            max-width: 8.333333333333334%;\n            flex-basis: 8.333333333333334%;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 0;\n            max-width: 12.5%;\n            flex-basis: 12.5%;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 0;\n            max-width: 16.666666666666668%;\n            flex-basis: 16.666666666666668%;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 0;\n            max-width: 20.833333333333336%;\n            flex-basis: 20.833333333333336%;\n            display: inherit;\n          }\n        }\n      </style></div><style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 0;\n          max-width: 4.166666666666667%;\n          flex-basis: 4.166666666666667%;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 0;\n            max-width: 8.333333333333334%;\n            flex-basis: 8.333333333333334%;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 0;\n            max-width: 12.5%;\n            flex-basis: 12.5%;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 0;\n            max-width: 16.666666666666668%;\n            flex-basis: 16.666666666666668%;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 0;\n            max-width: 20.833333333333336%;\n            flex-basis: 20.833333333333336%;\n            display: inherit;\n          }\n        }\n      </style></div>\"\n`;\n\nexports[`Grid css value should be passed through 1`] = `\n\"<div class=\\\\\"item justify direction alignItems alignContent mock\\\\\"><div class=\\\\\"item justify direction alignItems alignContent mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: center;\n        }\n        .direction {\n          flex-direction: column;\n        }\n        .alignContent {\n          align-content: center;\n        }\n        .alignItems {\n          align-items: center;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: center;\n        }\n        .direction {\n          flex-direction: column;\n        }\n        .alignContent {\n          align-content: center;\n        }\n        .alignItems {\n          align-items: center;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>\"\n`;\n\nexports[`Grid decimal spacing should be supported 1`] = `\n\"<div class=\\\\\"item mock\\\\\"><div class=\\\\\"item mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>\"\n`;\n\nexports[`Grid nested components should be supported 1`] = `\n\"<div class=\\\\\"item mock\\\\\"><div class=\\\\\"item mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><div class=\\\\\"item mock\\\\\"><div class=\\\\\"item mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><div class=\\\\\"item mock\\\\\"><div class=\\\\\"item mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><div class=\\\\\"item mock\\\\\"><div class=\\\\\"item mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>,<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>,<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>,<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>\"\n`;\n\nexports[`Grid should render correctly 1`] = `\n\"<div class=\\\\\"item mock\\\\\"><div class=\\\\\"item mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><div class=\\\\\"item mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>\"\n`;\n\nexports[`Grid should work correctly when size exceeds 1`] = `\n\"<div class=\\\\\"item mock\\\\\"><div class=\\\\\"item xs mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 0;\n          max-width: 100%;\n          flex-basis: 100%;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><div class=\\\\\"item xs mock\\\\\">test<style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 0;\n          max-width: 0;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div>\"\n`;\n"
  },
  {
    "path": "components/grid/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Grid } from 'components'\n\ndescribe('Grid', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Grid.Container>\n        <Grid>test</Grid>\n        <Grid>test</Grid>\n      </Grid.Container>,\n    )\n\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('all breakpoint values should be supported', () => {\n    const wrapper = mount(\n      <Grid.Container xs={1} sm={2} md={3} lg={4} xl={5}>\n        <Grid xs={1} sm={2} md={3} lg={4} xl={5}>\n          test\n        </Grid>\n      </Grid.Container>,\n    )\n\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('css value should be passed through', () => {\n    const wrapper = mount(\n      <Grid.Container\n        justify=\"center\"\n        alignItems=\"center\"\n        alignContent=\"center\"\n        direction=\"column\"\n        wrap=\"wrap\">\n        <Grid\n          justify=\"center\"\n          alignItems=\"center\"\n          alignContent=\"center\"\n          direction=\"column\">\n          test\n        </Grid>\n      </Grid.Container>,\n    )\n\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('decimal spacing should be supported', () => {\n    const wrapper = mount(\n      <Grid.Container gap={0.11123}>\n        <Grid>test</Grid>\n      </Grid.Container>,\n    )\n\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('nested components should be supported', () => {\n    const wrapper = mount(\n      <Grid.Container>\n        <Grid>test</Grid>\n        <Grid.Container>\n          <Grid>test</Grid>\n          <Grid.Container>\n            <Grid>test</Grid>\n            <Grid.Container>\n              <Grid>test</Grid>\n            </Grid.Container>\n            ,\n          </Grid.Container>\n          ,\n        </Grid.Container>\n        ,\n      </Grid.Container>,\n    )\n\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('there should be no alignment class when not set', () => {\n    let wrapper = mount(<Grid.Container justify=\"flex-end\" />)\n    expect(wrapper.find('.item').hasClass('justify')).toBeTruthy()\n    wrapper = mount(<Grid.Container />)\n    expect(wrapper.find('.item').hasClass('justify')).not.toBeTruthy()\n  })\n\n  it('there should be no responsive class when not set', () => {\n    let wrapper = mount(<Grid.Container sm={2} />)\n    expect(wrapper.find('.item').hasClass('sm')).toBeTruthy()\n    expect(wrapper.find('.item').hasClass('xs')).not.toBeTruthy()\n    wrapper = mount(<Grid.Container />)\n    expect(wrapper.find('.item').hasClass('sm')).not.toBeTruthy()\n  })\n\n  it('should work correctly when use alone', () => {\n    const wrapper = mount(<Grid />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work correctly when size exceeds', () => {\n    const wrapper = mount(\n      <Grid.Container>\n        <Grid xs={25}>test</Grid>\n        <Grid xs={-1}>test</Grid>\n      </Grid.Container>,\n    )\n\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('Grid should be hidden when value is 0', () => {\n    let wrapper = mount(<Grid.Container xs={0} />)\n    expect(wrapper.find('.item').hasClass('xs')).toBeTruthy()\n    expect(wrapper.find('.item').html()).toContain('display: none')\n  })\n})\n"
  },
  {
    "path": "components/grid/basic-item.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport {\n  GridJustify,\n  GridDirection,\n  GridAlignItems,\n  GridAlignContent,\n} from './grid-types'\nimport useScale from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type GridBreakpointsValue = number | boolean\nexport interface GridBasicComponentProps {\n  xs?: GridBreakpointsValue\n  sm?: GridBreakpointsValue\n  md?: GridBreakpointsValue\n  lg?: GridBreakpointsValue\n  xl?: GridBreakpointsValue\n  justify?: GridJustify\n  direction?: GridDirection\n  alignItems?: GridAlignItems\n  alignContent?: GridAlignContent\n  className?: string\n}\n\nconst defaultProps = {\n  xs: false as GridBreakpointsValue,\n  sm: false as GridBreakpointsValue,\n  md: false as GridBreakpointsValue,\n  lg: false as GridBreakpointsValue,\n  xl: false as GridBreakpointsValue,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof GridBasicComponentProps>\nexport type GridBasicItemProps = GridBasicComponentProps & NativeAttrs\n\ntype ItemLayoutValue = {\n  grow: number\n  width: string\n  basis: string\n  display: string\n}\nconst getItemLayout = (val: GridBreakpointsValue): ItemLayoutValue => {\n  const display = val === 0 ? 'display: none;' : 'display: inherit;'\n  if (typeof val === 'number') {\n    const width = (100 / 24) * val\n    const ratio = width > 100 ? '100%' : width < 0 ? '0' : `${width}%`\n    return {\n      grow: 0,\n      display,\n      width: ratio,\n      basis: ratio,\n    }\n  }\n  return {\n    grow: 1,\n    display,\n    width: '100%',\n    basis: '0',\n  }\n}\n\nconst GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({\n  xs,\n  sm,\n  md,\n  lg,\n  xl,\n  justify,\n  direction,\n  alignItems,\n  alignContent,\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<GridBasicItemProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const classes = useMemo(() => {\n    const aligns: { [key: string]: any } = {\n      justify,\n      direction,\n      alignItems,\n      alignContent,\n      xs,\n      sm,\n      md,\n      lg,\n      xl,\n    }\n    const classString = Object.keys(aligns).reduce((pre, name) => {\n      if (aligns[name] !== undefined && aligns[name] !== false) return `${pre} ${name}`\n      return pre\n    }, '')\n    return classString.trim()\n  }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl])\n\n  const layout = useMemo<{\n    [key in ['xs', 'sm', 'md', 'lg', 'xl'][number]]: ItemLayoutValue\n  }>(\n    () => ({\n      xs: getItemLayout(xs),\n      sm: getItemLayout(sm),\n      md: getItemLayout(md),\n      lg: getItemLayout(lg),\n      xl: getItemLayout(xl),\n    }),\n    [xs, sm, md, lg, xl],\n  )\n\n  return (\n    <div className={useClasses('item', classes, className)} {...props}>\n      {children}\n      <style jsx>{`\n        .item {\n          font-size: ${SCALES.font(1, 'inherit')};\n          height: ${SCALES.height(1, 'auto')};\n        }\n        .justify {\n          justify-content: ${justify};\n        }\n        .direction {\n          flex-direction: ${direction};\n        }\n        .alignContent {\n          align-content: ${alignContent};\n        }\n        .alignItems {\n          align-items: ${alignItems};\n        }\n        .xs {\n          flex-grow: ${layout.xs.grow};\n          max-width: ${layout.xs.width};\n          flex-basis: ${layout.xs.basis};\n          ${layout.xs.display}\n        }\n        @media only screen and (min-width: ${theme.breakpoints.sm.min}) {\n          .sm {\n            flex-grow: ${layout.sm.grow};\n            max-width: ${layout.sm.width};\n            flex-basis: ${layout.sm.basis};\n            ${layout.sm.display}\n          }\n        }\n        @media only screen and (min-width: ${theme.breakpoints.md.min}) {\n          .md {\n            flex-grow: ${layout.md.grow};\n            max-width: ${layout.md.width};\n            flex-basis: ${layout.md.basis};\n            ${layout.md.display}\n          }\n        }\n        @media only screen and (min-width: ${theme.breakpoints.lg.min}) {\n          .lg {\n            flex-grow: ${layout.lg.grow};\n            max-width: ${layout.lg.width};\n            flex-basis: ${layout.lg.basis};\n            ${layout.lg.display}\n          }\n        }\n        @media only screen and (min-width: ${theme.breakpoints.xl.min}) {\n          .xl {\n            flex-grow: ${layout.xl.grow};\n            max-width: ${layout.xl.width};\n            flex-basis: ${layout.xl.basis};\n            ${layout.xl.display}\n          }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nGridBasicItem.defaultProps = defaultProps\nGridBasicItem.displayName = 'GeistGridBasicItem'\nexport default GridBasicItem\n"
  },
  {
    "path": "components/grid/grid-container.tsx",
    "content": "import React, { useMemo } from 'react'\nimport GridBasicItem, { GridBasicItemProps } from './basic-item'\nimport { GridWrap } from './grid-types'\nimport css from 'styled-jsx/css'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  gap?: number\n  wrap?: GridWrap\n  className?: string\n}\n\nconst defaultProps = {\n  gap: 0,\n  wrap: 'wrap' as GridWrap,\n  className: '',\n}\n\nexport type GridContainerProps = Props & GridBasicItemProps\n\nconst GridContainerComponent: React.FC<React.PropsWithChildren<GridContainerProps>> = ({\n  gap,\n  wrap,\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<GridContainerProps> & typeof defaultProps) => {\n  const { unit, SCALES } = useScale()\n  const gapUnit = useMemo(() => `calc(${gap} * ${unit} * 1/3)`, [gap, unit])\n  const { className: resolveClassName, styles } = css.resolve`\n    div {\n      --grid-gap-unit: ${gapUnit};\n      --grid-container-margin: calc(-1 * var(--grid-gap-unit));\n      --grid-container-width: calc(100% + var(--grid-gap-unit) * 2);\n      display: flex;\n      flex-wrap: ${wrap};\n      box-sizing: border-box;\n      width: ${SCALES.width(1, 'var(--grid-container-width)')};\n      margin: ${SCALES.mt(0, 'var(--grid-container-margin)')}\n        ${SCALES.mr(0, 'var(--grid-container-margin)')}\n        ${SCALES.mb(0, 'var(--grid-container-margin)')}\n        ${SCALES.ml(0, 'var(--grid-container-margin)')};\n    }\n  `\n  const classes = useClasses(resolveClassName, className)\n\n  return (\n    <GridBasicItem className={classes} {...props}>\n      {children}\n      {styles}\n    </GridBasicItem>\n  )\n}\n\nGridContainerComponent.defaultProps = defaultProps\nGridContainerComponent.displayName = 'GeistGridContainer'\nconst GridContainer = withScale(GridContainerComponent)\nexport default GridContainer\n"
  },
  {
    "path": "components/grid/grid-types.ts",
    "content": "import { tuple } from '../utils/prop-types'\n\nconst justify = tuple(\n  'flex-start',\n  'center',\n  'flex-end',\n  'space-between',\n  'space-around',\n  'space-evenly',\n)\n\nexport type GridJustify = typeof justify[number]\n\nconst alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline')\n\nexport type GridAlignItems = typeof alignItems[number]\n\nconst alignContent = tuple(\n  'stretch',\n  'center',\n  'flex-start',\n  'flex-end',\n  'space-between',\n  'space-around',\n)\n\nexport type GridAlignContent = typeof alignContent[number]\n\nconst direction = tuple('row', 'row-reverse', 'column', 'column-reverse')\n\nexport type GridDirection = typeof direction[number]\n\nconst wrap = tuple('nowrap', 'wrap', 'wrap-reverse')\n\nexport type GridWrap = typeof wrap[number]\n"
  },
  {
    "path": "components/grid/grid.tsx",
    "content": "import React from 'react'\nimport css from 'styled-jsx/css'\nimport GridBasicItem, { GridBasicItemProps } from './basic-item'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\nexport type GridProps = Props & GridBasicItemProps\n\nconst GridComponent: React.FC<React.PropsWithChildren<GridProps>> = ({\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<GridProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const { className: resolveClassName, styles } = css.resolve`\n    div {\n      margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n      box-sizing: border-box;\n      padding: ${SCALES.pt(0, 'var(--grid-gap-unit)')}\n        ${SCALES.pr(0, 'var(--grid-gap-unit)')} ${SCALES.pb(0, 'var(--grid-gap-unit)')}\n        ${SCALES.pl(0, 'var(--grid-gap-unit)')};\n    }\n  `\n  const classes = useClasses(resolveClassName, className)\n\n  return (\n    <GridBasicItem className={classes} {...props}>\n      {children}\n      {styles}\n    </GridBasicItem>\n  )\n}\n\nGridComponent.defaultProps = defaultProps\nGridComponent.displayName = 'GeistGrid'\nconst Grid = withScale(GridComponent)\nexport default Grid\n"
  },
  {
    "path": "components/grid/index.ts",
    "content": "import Grid from './grid'\nimport GridContainer from './grid-container'\n\nexport type GridComponentType = typeof Grid & {\n  Container: typeof GridContainer\n}\n;(Grid as GridComponentType).Container = GridContainer\n\nexport type { GridContainerProps } from './grid-container'\nexport type { GridProps } from './grid'\nexport type { GridBreakpointsValue } from './basic-item'\nexport type {\n  GridAlignContent,\n  GridAlignItems,\n  GridDirection,\n  GridJustify,\n  GridWrap,\n} from './grid-types'\nexport default Grid as GridComponentType\n"
  },
  {
    "path": "components/image/__tests__/__snapshots__/browser.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Image Browser should render correctly 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"browser\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"traffic\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"close\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"mini\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"full\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"mini\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"full\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"close\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"full\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"mini\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"close\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"address-input\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"https\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"clip-rule\": \"evenodd\",\n                            \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                            \"fill-rule\": \"evenodd\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"link\",\n                      \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      \"target\": \"_blank\",\n                      \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"a\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"link\",\n                    \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    \"target\": \"_blank\",\n                    \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"geist-ui.dev\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"a\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"https\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"link\",\n                      \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      \"target\": \"_blank\",\n                      \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"a\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"https\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"address-input\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"https\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"fill\": \"currentColor\",\n                      \"viewBox\": \"0 0 24 24\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"clip-rule\": \"evenodd\",\n                            \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                            \"fill-rule\": \"evenodd\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"d\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"d\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {\n                          \"clip-rule\": \"evenodd\",\n                          \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                          \"fill-rule\": \"evenodd\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"path\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"clip-rule\": undefined,\n                          \"d\": undefined,\n                          \"fill-rule\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"clip-rule\": undefined,\n                          \"d\": undefined,\n                          \"fill-rule\": undefined,\n                        },\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"clip-rule\": \"evenodd\",\n                            \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                            \"fill-rule\": \"evenodd\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"svg\",\n                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"fill\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"fill\": undefined,\n                      \"viewBox\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"link\",\n                    \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    \"target\": \"_blank\",\n                    \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"geist-ui.dev\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"a\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"link\",\n                  \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                  \"target\": \"_blank\",\n                  \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"geist-ui.dev\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"data\": \"geist-ui.dev\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"a\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"https\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"clip-rule\": \"evenodd\",\n                            \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                            \"fill-rule\": \"evenodd\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"href\": undefined,\n                  \"target\": undefined,\n                  \"title\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"href\": undefined,\n                  \"target\": undefined,\n                  \"title\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"link\",\n                    \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    \"target\": \"_blank\",\n                    \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"geist-ui.dev\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"a\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"https\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"traffic\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"close\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"mini\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"full\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"mini\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"full\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"close\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"full\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"mini\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"close\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n        ],\n        \"name\": \"header\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"image\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"src\": \"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",\n              },\n              \"children\": Array [],\n              \"name\": \"img\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .image {\n          position: relative;\n          border-radius: 6px;\n          overflow: hidden;\n          max-width: 100%;\n          width: auto;\n          height: auto;\n          margin: 0 auto 0\n            auto;\n          padding: 0 0 0 0;\n        }\n\n        img {\n          width: auto;\n          height: auto;\n          object-fit: scale-down;\n          display: inline-block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"src\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"src\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .image {\n          position: relative;\n          border-radius: 6px;\n          overflow: hidden;\n          max-width: 100%;\n          width: auto;\n          height: auto;\n          margin: 0 auto 0\n            auto;\n          padding: 0 0 0 0;\n        }\n\n        img {\n          width: auto;\n          height: auto;\n          object-fit: scale-down;\n          display: inline-block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"src\": \"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",\n                },\n                \"children\": Array [],\n                \"name\": \"img\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"src\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"src\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          .browser {\n            background-color: transparent;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            max-width: 100%;\n            border-radius: 6px;\n            overflow: hidden;\n            font-size: calc(1 * 16px);\n            width: max-content;\n            height: auto;\n            margin: 0 auto 0\n              auto;\n            padding: 0 0 0 0;\n          }\n          .browser :global(.image) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          header {\n            height: 2.5em;\n            width: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            color: #000;\n            background-color: #fff;\n            border-bottom: 1px solid #eaeaea;\n          }\n          .traffic {\n            width: auto;\n            position: absolute;\n            left: 8pt;\n            top: 50%;\n            transform: translateY(-50%);\n            bottom: 0;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            user-select: none;\n            font-size: inherit;\n          }\n          .traffic span {\n            border-radius: 50%;\n            width: 0.75em;\n            height: 0.75em;\n            max-width: 20px;\n            max-height: 20px;\n            display: inline-block;\n            margin-right: 0.5em;\n          }\n          .close {\n            background-color: #ff5f56;\n          }\n          .mini {\n            background-color: #ffbd2e;\n          }\n          .full {\n            background-color: #27c93f;\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"image\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"src\": \"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",\n            },\n            \"children\": Array [],\n            \"name\": \"img\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .image {\n          position: relative;\n          border-radius: 6px;\n          overflow: hidden;\n          max-width: 100%;\n          width: auto;\n          height: auto;\n          margin: 0 auto 0\n            auto;\n          padding: 0 0 0 0;\n        }\n\n        img {\n          width: auto;\n          height: auto;\n          object-fit: scale-down;\n          display: inline-block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"src\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"src\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .image {\n          position: relative;\n          border-radius: 6px;\n          overflow: hidden;\n          max-width: 100%;\n          width: auto;\n          height: auto;\n          margin: 0 auto 0\n            auto;\n          padding: 0 0 0 0;\n        }\n\n        img {\n          width: auto;\n          height: auto;\n          object-fit: scale-down;\n          display: inline-block;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"src\": \"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",\n              },\n              \"children\": Array [],\n              \"name\": \"img\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"src\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"src\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          .browser {\n            background-color: transparent;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            max-width: 100%;\n            border-radius: 6px;\n            overflow: hidden;\n            font-size: calc(1 * 16px);\n            width: max-content;\n            height: auto;\n            margin: 0 auto 0\n              auto;\n            padding: 0 0 0 0;\n          }\n          .browser :global(.image) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          header {\n            height: 2.5em;\n            width: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            color: #000;\n            background-color: #fff;\n            border-bottom: 1px solid #eaeaea;\n          }\n          .traffic {\n            width: auto;\n            position: absolute;\n            left: 8pt;\n            top: 50%;\n            transform: translateY(-50%);\n            bottom: 0;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            user-select: none;\n            font-size: inherit;\n          }\n          .traffic span {\n            border-radius: 50%;\n            width: 0.75em;\n            height: 0.75em;\n            max-width: 20px;\n            max-height: 20px;\n            display: inline-block;\n            margin-right: 0.5em;\n          }\n          .close {\n            background-color: #ff5f56;\n          }\n          .mini {\n            background-color: #ffbd2e;\n          }\n          .full {\n            background-color: #27c93f;\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"traffic\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"close\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"mini\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"full\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"mini\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"full\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"close\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"full\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"mini\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"close\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"address-input\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"https\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"link\",\n                        \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                        \"target\": \"_blank\",\n                        \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"geist-ui.dev\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"a\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"link\",\n                      \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      \"target\": \"_blank\",\n                      \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"a\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"https\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"link\",\n                        \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                        \"target\": \"_blank\",\n                        \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"geist-ui.dev\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"a\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"https\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {\n                                    \"clip-rule\": \"evenodd\",\n                                    \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                    \"fill-rule\": \"evenodd\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"clip-rule\": \"evenodd\",\n                                    \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                    \"fill-rule\": \"evenodd\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"address-input\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"https\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"fill\": \"currentColor\",\n                        \"viewBox\": \"0 0 24 24\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"d\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"d\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {\n                            \"clip-rule\": \"evenodd\",\n                            \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                            \"fill-rule\": \"evenodd\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"path\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"clip-rule\": undefined,\n                            \"d\": undefined,\n                            \"fill-rule\": undefined,\n                          },\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"svg\",\n                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"fill\": undefined,\n                        \"viewBox\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"link\",\n                      \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      \"target\": \"_blank\",\n                      \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"a\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"link\",\n                    \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    \"target\": \"_blank\",\n                    \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"geist-ui.dev\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"a\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"https\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"href\": undefined,\n                    \"target\": undefined,\n                    \"title\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"link\",\n                      \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      \"target\": \"_blank\",\n                      \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"a\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"https\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"traffic\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"close\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"mini\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"full\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"mini\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"full\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"close\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"full\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"mini\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"close\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n          ],\n          \"name\": \"header\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n          .browser {\n            background-color: transparent;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            max-width: 100%;\n            border-radius: 6px;\n            overflow: hidden;\n            font-size: calc(1 * 16px);\n            width: max-content;\n            height: auto;\n            margin: 0 auto 0\n              auto;\n            padding: 0 0 0 0;\n          }\n          .browser :global(.image) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          header {\n            height: 2.5em;\n            width: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            color: #000;\n            background-color: #fff;\n            border-bottom: 1px solid #eaeaea;\n          }\n          .traffic {\n            width: auto;\n            position: absolute;\n            left: 8pt;\n            top: 50%;\n            transform: translateY(-50%);\n            bottom: 0;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            user-select: none;\n            font-size: inherit;\n          }\n          .traffic span {\n            border-radius: 50%;\n            width: 0.75em;\n            height: 0.75em;\n            max-width: 20px;\n            max-height: 20px;\n            display: inline-block;\n            margin-right: 0.5em;\n          }\n          .close {\n            background-color: #ff5f56;\n          }\n          .mini {\n            background-color: #ffbd2e;\n          }\n          .full {\n            background-color: #27c93f;\n          }\n        \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"image\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"src\": \"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",\n              },\n              \"children\": Array [],\n              \"name\": \"img\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .image {\n          position: relative;\n          border-radius: 6px;\n          overflow: hidden;\n          max-width: 100%;\n          width: auto;\n          height: auto;\n          margin: 0 auto 0\n            auto;\n          padding: 0 0 0 0;\n        }\n\n        img {\n          width: auto;\n          height: auto;\n          object-fit: scale-down;\n          display: inline-block;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"src\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"src\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .image {\n          position: relative;\n          border-radius: 6px;\n          overflow: hidden;\n          max-width: 100%;\n          width: auto;\n          height: auto;\n          margin: 0 auto 0\n            auto;\n          padding: 0 0 0 0;\n        }\n\n        img {\n          width: auto;\n          height: auto;\n          object-fit: scale-down;\n          display: inline-block;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"src\": \"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==\",\n                },\n                \"children\": Array [],\n                \"name\": \"img\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"src\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"src\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"traffic\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"close\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"mini\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"full\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"mini\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"full\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"close\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"full\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"mini\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"close\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"address-input\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"https\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"link\",\n                          \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                          \"target\": \"_blank\",\n                          \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"geist-ui.dev\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"data\": \"geist-ui.dev\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"a\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                          \"href\": undefined,\n                          \"target\": undefined,\n                          \"title\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                          \"href\": undefined,\n                          \"target\": undefined,\n                          \"title\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"link\",\n                        \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                        \"target\": \"_blank\",\n                        \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"geist-ui.dev\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"a\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"https\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {\n                                    \"clip-rule\": \"evenodd\",\n                                    \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                    \"fill-rule\": \"evenodd\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"clip-rule\": \"evenodd\",\n                                    \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                    \"fill-rule\": \"evenodd\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"link\",\n                          \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                          \"target\": \"_blank\",\n                          \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"geist-ui.dev\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"data\": \"geist-ui.dev\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"a\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"class\": \"https\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"fill\": \"currentColor\",\n                                \"viewBox\": \"0 0 24 24\",\n                              },\n                              \"children\": Array [\n                                Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {\n                                      \"clip-rule\": \"evenodd\",\n                                      \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                      \"fill-rule\": \"evenodd\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": Node {\n                                      \"attribs\": Object {},\n                                      \"children\": Array [\n                                        Node {\n                                          \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                          \"next\": null,\n                                          \"parent\": [Circular],\n                                          \"prev\": null,\n                                          \"type\": \"text\",\n                                        },\n                                      ],\n                                      \"name\": \"style\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": [Circular],\n                                      \"type\": \"style\",\n                                      \"x-attribsNamespace\": Object {},\n                                      \"x-attribsPrefix\": Object {},\n                                    },\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"clip-rule\": undefined,\n                                      \"d\": undefined,\n                                      \"fill-rule\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"clip-rule\": undefined,\n                                      \"d\": undefined,\n                                      \"fill-rule\": undefined,\n                                    },\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {\n                                    \"clip-rule\": \"evenodd\",\n                                    \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                    \"fill-rule\": \"evenodd\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                },\n                                Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"clip-rule\": \"evenodd\",\n                                      \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                      \"fill-rule\": \"evenodd\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": Node {\n                                      \"attribs\": Object {\n                                        \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                      },\n                                      \"children\": Array [],\n                                      \"name\": \"path\",\n                                      \"namespace\": \"http://www.w3.org/2000/svg\",\n                                      \"next\": [Circular],\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"tag\",\n                                      \"x-attribsNamespace\": Object {\n                                        \"d\": undefined,\n                                      },\n                                      \"x-attribsPrefix\": Object {\n                                        \"d\": undefined,\n                                      },\n                                    },\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"clip-rule\": undefined,\n                                      \"d\": undefined,\n                                      \"fill-rule\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"clip-rule\": undefined,\n                                      \"d\": undefined,\n                                      \"fill-rule\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                              ],\n                              \"name\": \"svg\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"fill\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"fill\": undefined,\n                                \"viewBox\": undefined,\n                              },\n                            },\n                          ],\n                          \"name\": \"span\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                          \"href\": undefined,\n                          \"target\": undefined,\n                          \"title\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                          \"href\": undefined,\n                          \"target\": undefined,\n                          \"title\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"address-input\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"https\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"attribs\": Object {\n                          \"fill\": \"currentColor\",\n                          \"viewBox\": \"0 0 24 24\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"d\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"d\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {\n                              \"clip-rule\": \"evenodd\",\n                              \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                              \"fill-rule\": \"evenodd\",\n                            },\n                            \"children\": Array [],\n                            \"name\": \"path\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": [Circular],\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"clip-rule\": undefined,\n                              \"d\": undefined,\n                              \"fill-rule\": undefined,\n                            },\n                          },\n                          Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": [Circular],\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                        ],\n                        \"name\": \"svg\",\n                        \"namespace\": \"http://www.w3.org/2000/svg\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"fill\": undefined,\n                          \"viewBox\": undefined,\n                        },\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"link\",\n                        \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                        \"target\": \"_blank\",\n                        \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"geist-ui.dev\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"a\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"link\",\n                      \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      \"target\": \"_blank\",\n                      \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"geist-ui.dev\",\n                        \"next\": Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                      Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                    ],\n                    \"name\": \"a\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"https\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"attribs\": Object {\n                            \"fill\": \"currentColor\",\n                            \"viewBox\": \"0 0 24 24\",\n                          },\n                          \"children\": Array [\n                            Node {\n                              \"attribs\": Object {\n                                \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"d\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"d\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {\n                                \"clip-rule\": \"evenodd\",\n                                \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                \"fill-rule\": \"evenodd\",\n                              },\n                              \"children\": Array [],\n                              \"name\": \"path\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": [Circular],\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              \"type\": \"tag\",\n                              \"x-attribsNamespace\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                              \"x-attribsPrefix\": Object {\n                                \"clip-rule\": undefined,\n                                \"d\": undefined,\n                                \"fill-rule\": undefined,\n                              },\n                            },\n                            Node {\n                              \"attribs\": Object {},\n                              \"children\": Array [\n                                Node {\n                                  \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"text\",\n                                },\n                              ],\n                              \"name\": \"style\",\n                              \"namespace\": \"http://www.w3.org/2000/svg\",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": [Circular],\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              \"type\": \"style\",\n                              \"x-attribsNamespace\": Object {},\n                              \"x-attribsPrefix\": Object {},\n                            },\n                          ],\n                          \"name\": \"svg\",\n                          \"namespace\": \"http://www.w3.org/2000/svg\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"fill\": undefined,\n                            \"viewBox\": undefined,\n                          },\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"href\": undefined,\n                      \"target\": undefined,\n                      \"title\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: #fafafa;\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"link\",\n                        \"href\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                        \"target\": \"_blank\",\n                        \"title\": \"https://geist-ui.dev/en-us/guide/introduction\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"geist-ui.dev\",\n                          \"next\": Node {\n                            \"attribs\": Object {},\n                            \"children\": Array [\n                              Node {\n                                \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"text\",\n                              },\n                            ],\n                            \"name\": \"style\",\n                            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": [Circular],\n                            \"type\": \"style\",\n                            \"x-attribsNamespace\": Object {},\n                            \"x-attribsPrefix\": Object {},\n                          },\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                        Node {\n                          \"attribs\": Object {},\n                          \"children\": Array [\n                            Node {\n                              \"data\": \"\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        \",\n                              \"next\": null,\n                              \"parent\": [Circular],\n                              \"prev\": null,\n                              \"type\": \"text\",\n                            },\n                          ],\n                          \"name\": \"style\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": Node {\n                            \"data\": \"geist-ui.dev\",\n                            \"next\": [Circular],\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                          \"type\": \"style\",\n                          \"x-attribsNamespace\": Object {},\n                          \"x-attribsPrefix\": Object {},\n                        },\n                      ],\n                      \"name\": \"a\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"https\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"attribs\": Object {\n                              \"fill\": \"currentColor\",\n                              \"viewBox\": \"0 0 24 24\",\n                            },\n                            \"children\": Array [\n                              Node {\n                                \"attribs\": Object {\n                                  \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {\n                                    \"clip-rule\": \"evenodd\",\n                                    \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                    \"fill-rule\": \"evenodd\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": Node {\n                                    \"attribs\": Object {},\n                                    \"children\": Array [\n                                      Node {\n                                        \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                        \"next\": null,\n                                        \"parent\": [Circular],\n                                        \"prev\": null,\n                                        \"type\": \"text\",\n                                      },\n                                    ],\n                                    \"name\": \"style\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": [Circular],\n                                    \"type\": \"style\",\n                                    \"x-attribsNamespace\": Object {},\n                                    \"x-attribsPrefix\": Object {},\n                                  },\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": null,\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"d\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"d\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {\n                                  \"clip-rule\": \"evenodd\",\n                                  \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                  \"fill-rule\": \"evenodd\",\n                                },\n                                \"children\": Array [],\n                                \"name\": \"path\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": Node {\n                                  \"attribs\": Object {},\n                                  \"children\": Array [\n                                    Node {\n                                      \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                      \"next\": null,\n                                      \"parent\": [Circular],\n                                      \"prev\": null,\n                                      \"type\": \"text\",\n                                    },\n                                  ],\n                                  \"name\": \"style\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": null,\n                                  \"parent\": [Circular],\n                                  \"prev\": [Circular],\n                                  \"type\": \"style\",\n                                  \"x-attribsNamespace\": Object {},\n                                  \"x-attribsPrefix\": Object {},\n                                },\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": null,\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"d\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"d\": undefined,\n                                  },\n                                },\n                                \"type\": \"tag\",\n                                \"x-attribsNamespace\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                                \"x-attribsPrefix\": Object {\n                                  \"clip-rule\": undefined,\n                                  \"d\": undefined,\n                                  \"fill-rule\": undefined,\n                                },\n                              },\n                              Node {\n                                \"attribs\": Object {},\n                                \"children\": Array [\n                                  Node {\n                                    \"data\": \"\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      \",\n                                    \"next\": null,\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"text\",\n                                  },\n                                ],\n                                \"name\": \"style\",\n                                \"namespace\": \"http://www.w3.org/2000/svg\",\n                                \"next\": null,\n                                \"parent\": [Circular],\n                                \"prev\": Node {\n                                  \"attribs\": Object {\n                                    \"clip-rule\": \"evenodd\",\n                                    \"d\": \"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\",\n                                    \"fill-rule\": \"evenodd\",\n                                  },\n                                  \"children\": Array [],\n                                  \"name\": \"path\",\n                                  \"namespace\": \"http://www.w3.org/2000/svg\",\n                                  \"next\": [Circular],\n                                  \"parent\": [Circular],\n                                  \"prev\": Node {\n                                    \"attribs\": Object {\n                                      \"d\": \"M5 10.2H19V21H5V10.2Z\",\n                                    },\n                                    \"children\": Array [],\n                                    \"name\": \"path\",\n                                    \"namespace\": \"http://www.w3.org/2000/svg\",\n                                    \"next\": [Circular],\n                                    \"parent\": [Circular],\n                                    \"prev\": null,\n                                    \"type\": \"tag\",\n                                    \"x-attribsNamespace\": Object {\n                                      \"d\": undefined,\n                                    },\n                                    \"x-attribsPrefix\": Object {\n                                      \"d\": undefined,\n                                    },\n                                  },\n                                  \"type\": \"tag\",\n                                  \"x-attribsNamespace\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                  \"x-attribsPrefix\": Object {\n                                    \"clip-rule\": undefined,\n                                    \"d\": undefined,\n                                    \"fill-rule\": undefined,\n                                  },\n                                },\n                                \"type\": \"style\",\n                                \"x-attribsNamespace\": Object {},\n                                \"x-attribsPrefix\": Object {},\n                              },\n                            ],\n                            \"name\": \"svg\",\n                            \"namespace\": \"http://www.w3.org/2000/svg\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"tag\",\n                            \"x-attribsNamespace\": Object {\n                              \"fill\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                            \"x-attribsPrefix\": Object {\n                              \"fill\": undefined,\n                              \"viewBox\": undefined,\n                            },\n                          },\n                        ],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"href\": undefined,\n                        \"target\": undefined,\n                        \"title\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"traffic\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"close\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"mini\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": Node {\n                          \"attribs\": Object {\n                            \"class\": \"full\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"span\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": [Circular],\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"mini\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"full\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"close\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"full\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"mini\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": Node {\n                          \"attribs\": Object {\n                            \"class\": \"close\",\n                          },\n                          \"children\": Array [],\n                          \"name\": \"span\",\n                          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                          \"next\": [Circular],\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"tag\",\n                          \"x-attribsNamespace\": Object {\n                            \"class\": undefined,\n                          },\n                          \"x-attribsPrefix\": Object {\n                            \"class\": undefined,\n                          },\n                        },\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                  ],\n                  \"name\": \"div\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"header\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/image/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Image should render correctly 1`] = `ReactWrapper {}`;\n\nexports[`Image should render correctly 2`] = `ReactWrapper {}`;\n\nexports[`Image should render correctly 3`] = `ReactWrapper {}`;\n\nexports[`Image should render correctly with svg string 1`] = `ReactWrapper {}`;\n\nexports[`Image should render correctly with svg string 2`] = `ReactWrapper {}`;\n\nexports[`Image should render correctly with svg string 3`] = `ReactWrapper {}`;\n"
  },
  {
    "path": "components/image/__tests__/browser.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Image } from 'components'\n\nconst link = 'https://geist-ui.dev/en-us/guide/introduction'\nconst url =\n  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA' +\n  'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +\n  '9TXL0Y4OHwAAAABJRU5ErkJggg=='\n\ndescribe('Image Browser', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Image.Browser url={link}>\n        <Image src={url} />\n      </Image.Browser>,\n    )\n    expect(() => wrapper.unmount()).not.toThrow()\n\n    const browser = render(\n      <Image.Browser url={link}>\n        <Image src={url} />\n      </Image.Browser>,\n    )\n    expect(browser).toMatchSnapshot()\n  })\n\n  it('show title when url missing', () => {\n    const wrapper = mount(\n      <Image.Browser title=\"test-title\">\n        <Image src={url} />\n      </Image.Browser>,\n    )\n    expect(wrapper.find('header').text()).toContain('test-title')\n  })\n\n  it('should work correctly with full link', () => {\n    const wrapper = mount(\n      <Image.Browser url={link}>\n        <Image src={url} />\n      </Image.Browser>,\n    )\n    expect(wrapper.find('.link').text()).not.toContain('http')\n    wrapper.setProps({ showFullLink: true })\n    expect(wrapper.find('.link').text()).toContain('http')\n  })\n\n  it('show full link when url parse error', () => {\n    const errorLink = 'httpsw/com'\n    const wrapper = mount(\n      <Image.Browser url={errorLink}>\n        <Image src={url} />\n      </Image.Browser>,\n    )\n    expect(wrapper.find('.link').text()).toContain(errorLink)\n  })\n\n  it('should work correctly when props missing', () => {\n    const wrapper = mount(<Image.Browser />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('anchor props should be passed through', () => {\n    const anchorRel = 'noreferrer'\n    const wrapper = mount(\n      <Image.Browser url={link} anchorProps={{ rel: anchorRel }}>\n        <Image src={url} />\n      </Image.Browser>,\n    )\n    const rel = wrapper.find('a').getDOMNode().getAttribute('rel')\n    expect(rel).toEqual(anchorRel)\n  })\n})\n"
  },
  {
    "path": "components/image/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Image } from 'components'\nimport { updateWrapper } from 'tests/utils'\n\nconst url =\n  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA' +\n  'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +\n  '9TXL0Y4OHwAAAABJRU5ErkJggg=='\n\nconst svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15px\" height=\"15px\" viewBox=\"0 0 15 15\" fill=\"none\">\n      <path d=\"M12.5 8V7.83333C12.5 7.09695 11.903 6.5 11.1667 6.5H10C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11C11.8284 9.5 12.5 10.1716 12.5 11C12.5 11.8284 11.8284 12.5 11 12.5H10C9.17157 12.5 8.5 11.8284 8.5 11M8 6.5H3M5.5 6.5V13M0.5 0.5H14.5V14.5H0.5V0.5Z\" stroke=\"black\"/></svg>`\n\ndescribe('Image', () => {\n  it('should render correctly', async () => {\n    let wrapper = mount(<Image src={url} />)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n\n    wrapper = mount(<Image src={url} width={20} height={20} />)\n    wrapper.find('img').at(0).simulate('load')\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n\n    wrapper = mount(<Image src={url} width={20} height={20} disableSkeleton />)\n    wrapper.find('img').at(0).simulate('load')\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render correctly with svg string', () => {\n    let wrapper = mount(<Image src={svg} />)\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n\n    wrapper = mount(<Image src={svg} width={20} height={20} />)\n    wrapper.find('img').at(0).simulate('load')\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n\n    wrapper = mount(<Image src={svg} width={20} height={20} disableSkeleton />)\n    wrapper.find('img').at(0).simulate('load')\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work correctly with skeleton', async () => {\n    let wrapper = mount(<Image src={url} width={20} height={20} />)\n    expect(wrapper.find('.skeleton').length).not.toBe(0)\n\n    wrapper = mount(<Image src={url} width={20} height={20} />)\n    wrapper.find('img').at(0).simulate('load')\n    await updateWrapper(wrapper)\n    expect(wrapper.find('.skeleton').length).not.toBe(0)\n\n    wrapper = mount(<Image src={url} width={20} />)\n    expect(wrapper.find('.skeleton').length).toBe(0)\n\n    mount(<Image src={url} width={20} height={20} disableSkeleton />)\n    expect(wrapper.find('.skeleton').length).toBe(0)\n  })\n\n  it('should remove skeleton when timeout', async () => {\n    const animation = mount(<Image src={url} width={20} height={20} maxDelay={100} />)\n    const NoAnimation = mount(\n      <Image src={url} width={20} height={20} maxDelay={100} disableSkeleton />,\n    )\n    expect(animation.find('.skeleton').length).not.toBe(0)\n    await updateWrapper(animation, 300)\n    await updateWrapper(NoAnimation, 300)\n    expect(animation.find('.skeleton').length).toBe(0)\n    expect(NoAnimation.find('.skeleton').length).toBe(0)\n  })\n\n  it('should remove skeleton when image completed', async () => {\n    Object.defineProperty((global as any).Image.prototype, 'complete', {\n      get() {\n        return true\n      },\n    })\n    const wrapper = mount(<Image src={url} width={20} height={20} />)\n    const img = wrapper.find('img').at(0)\n    img.simulate('load')\n    await updateWrapper(wrapper)\n    expect((img.getDOMNode() as HTMLImageElement).complete).toEqual(true)\n    expect(wrapper.find('.skeleton').length).toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/image/helpers.ts",
    "content": "export const transformDataSource = (src: string) => {\n  const left = `${src}`.slice(0, 4)\n  if (encodeURIComponent(left) === '%3Csvg') {\n    return `data:image/svg+xml;utf8,${src}`\n  }\n  return src\n}\n\nexport const getHostFromUrl = (url: string) => {\n  try {\n    return new URL(url).host\n  } catch (e) {\n    return url\n  }\n}\n"
  },
  {
    "path": "components/image/image-browser-https-icon.tsx",
    "content": "import React from 'react'\n\nconst ImageBrowserHttpsIcon = () => {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M5 10.2H19V21H5V10.2Z\" />\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 12C13.933 12 15.5 10.3882 15.5 8.4C15.5 6.41177 13.933 4.8 12 4.8C10.067 4.8 8.5 6.41177 8.5 8.4C8.5 10.3882 10.067 12 12 12ZM12 13.8C14.8995 13.8 17.25 11.3823 17.25 8.4C17.25 5.41766 14.8995 3 12 3C9.10051 3 6.75 5.41766 6.75 8.4C6.75 11.3823 9.10051 13.8 12 13.8Z\"\n      />\n      <style jsx>{`\n        svg {\n          width: 1em;\n          height: 1em;\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nconst MemoImageBrowserHttpsIcon = React.memo(ImageBrowserHttpsIcon)\n\nexport default MemoImageBrowserHttpsIcon\n"
  },
  {
    "path": "components/image/image-browser.tsx",
    "content": "import React, { useMemo } from 'react'\nimport Link from '../link'\nimport { Props as LinkProps } from '../link/link'\nimport useTheme from '../use-theme'\nimport ImageBrowserHttpsIcon from './image-browser-https-icon'\nimport { getBrowserColors, BrowserColors } from './styles'\nimport { getHostFromUrl } from './helpers'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type ImageAnchorProps = Omit<React.AnchorHTMLAttributes<any>, keyof LinkProps>\n\ninterface Props {\n  title?: string\n  url?: string\n  showFullLink?: boolean\n  invert?: boolean\n  anchorProps?: ImageAnchorProps\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n  showFullLink: false,\n  anchorProps: {} as ImageAnchorProps,\n  invert: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type ImageBrowserProps = Props & NativeAttrs\n\nconst getTitle = (title: string, colors: BrowserColors) => (\n  <div className=\"title\">\n    {title}\n    <style jsx>{`\n      .title {\n        color: ${colors.titleColor};\n        font-size: 0.75em;\n      }\n    `}</style>\n  </div>\n)\n\nconst getAddressInput = (\n  url: string,\n  showFullLink: boolean,\n  colors: BrowserColors,\n  anchorProps: ImageAnchorProps,\n) => (\n  <div className=\"address-input\">\n    <span className=\"https\">\n      <ImageBrowserHttpsIcon />\n    </span>\n    <Link href={url} title={url} target=\"_blank\" {...anchorProps}>\n      {showFullLink ? url : getHostFromUrl(url)}\n    </Link>\n    <style jsx>{`\n      .address-input {\n        height: 1.75em;\n        max-width: 60%;\n        min-width: 40%;\n        background-color: ${colors.inputBgColor};\n        color: inherit;\n        border-radius: 3px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0 10px;\n        overflow: hidden;\n        position: relative;\n      }\n      .address-input :global(*) {\n        font-size: 0.75em;\n        color: inherit;\n      }\n      .address-input :global(a) {\n        max-width: 90%;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        display: inline-block;\n        color: inherit;\n      }\n      .https {\n        width: 0.75em;\n        height: 0.75em;\n        font-size: 1em;\n        margin-right: 0.31em;\n        user-select: none;\n        margin-top: -1px;\n        color: inherit;\n        display: inline-flex;\n        align-items: center;\n      }\n    `}</style>\n  </div>\n)\n\nconst ImageBrowserComponent = React.forwardRef<\n  HTMLDivElement,\n  React.PropsWithChildren<ImageBrowserProps>\n>(\n  (\n    {\n      url,\n      title,\n      children,\n      showFullLink,\n      invert,\n      anchorProps,\n      className,\n      ...props\n    }: React.PropsWithChildren<ImageBrowserProps> & typeof defaultProps,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const theme = useTheme()\n    const { SCALES } = useScale()\n    const colors = useMemo(\n      () => getBrowserColors(invert, theme.palette),\n      [invert, theme.palette],\n    )\n    const input = useMemo(() => {\n      if (url) return getAddressInput(url, showFullLink, colors, anchorProps)\n      if (title) return getTitle(title, colors)\n      return null\n    }, [url, showFullLink, title, colors, anchorProps])\n\n    return (\n      <div className={useClasses('browser', className)} ref={ref} {...props}>\n        <header>\n          <div className=\"traffic\">\n            <span className=\"close\" />\n            <span className=\"mini\" />\n            <span className=\"full\" />\n          </div>\n          {input}\n        </header>\n        {children}\n        <style jsx>{`\n          .browser {\n            background-color: transparent;\n            box-shadow: ${theme.expressiveness.shadowLarge};\n            max-width: 100%;\n            border-radius: ${theme.layout.radius};\n            overflow: hidden;\n            font-size: ${SCALES.font(1)};\n            width: ${SCALES.width(1, 'max-content')};\n            height: ${SCALES.height(1, 'auto')};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0)}\n              ${SCALES.ml(0, 'auto')};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          }\n          .browser :global(.image) {\n            border-top-left-radius: 0;\n            border-top-right-radius: 0;\n          }\n          header {\n            height: 2.5em;\n            width: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            color: ${colors.color};\n            background-color: ${colors.barBgColor};\n            border-bottom: 1px solid ${colors.borderColor};\n          }\n          .traffic {\n            width: auto;\n            position: absolute;\n            left: ${theme.layout.gapHalf};\n            top: 50%;\n            transform: translateY(-50%);\n            bottom: 0;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            user-select: none;\n            font-size: inherit;\n          }\n          .traffic span {\n            border-radius: 50%;\n            width: 0.75em;\n            height: 0.75em;\n            max-width: 20px;\n            max-height: 20px;\n            display: inline-block;\n            margin-right: 0.5em;\n          }\n          .close {\n            background-color: #ff5f56;\n          }\n          .mini {\n            background-color: #ffbd2e;\n          }\n          .full {\n            background-color: #27c93f;\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nImageBrowserComponent.defaultProps = defaultProps\nImageBrowserComponent.displayName = 'GeistImageBrowser'\nconst ImageBrowser = withScale(ImageBrowserComponent)\nexport default ImageBrowser\n"
  },
  {
    "path": "components/image/image.skeleton.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\n\ninterface Props {\n  opacity?: number\n}\n\nconst defaultProps = {\n  opacity: 0.5,\n}\n\nexport type ImageSkeletonProps = Props\n\nconst ImageSkeleton: React.FC<ImageSkeletonProps> = React.memo(\n  ({ opacity, ...props }: ImageSkeletonProps & typeof defaultProps) => {\n    const theme = useTheme()\n    return (\n      <div className=\"skeleton\" {...props}>\n        <style jsx>{`\n          .skeleton {\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            width: 100%;\n            height: 100%;\n            background-image: linear-gradient(\n              270deg,\n              ${theme.palette.accents_1},\n              ${theme.palette.accents_2},\n              ${theme.palette.accents_2},\n              ${theme.palette.accents_1}\n            );\n            background-size: 400% 100%;\n            animation: loading 3s ease-in-out infinite;\n            opacity: ${opacity};\n            transition: opacity 300ms ease-out;\n          }\n\n          @keyframes loading {\n            0% {\n              background-position: 200% 0;\n            }\n            to {\n              background-position: -200% 0;\n            }\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nImageSkeleton.defaultProps = defaultProps\nImageSkeleton.displayName = 'GeistImageSkeleton'\nexport default ImageSkeleton\n"
  },
  {
    "path": "components/image/image.tsx",
    "content": "import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport useTheme from '../use-theme'\nimport ImageSkeleton from './image.skeleton'\nimport { transformDataSource } from './helpers'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  src: string\n  disableSkeleton?: boolean\n  className?: string\n  maxDelay?: number\n}\n\nconst defaultProps = {\n  disableSkeleton: false,\n  className: '',\n  maxDelay: 3000,\n}\n\ntype NativeAttrs = Omit<React.ImgHTMLAttributes<any>, keyof Props>\nexport type ImageProps = Props & NativeAttrs\n\nconst ImageComponent: React.FC<ImageProps> = ({\n  src,\n  disableSkeleton,\n  className,\n  maxDelay,\n  ...props\n}: ImageProps & typeof defaultProps) => {\n  const { SCALES, getScaleProps } = useScale()\n  const width = getScaleProps(['width', 'w'])\n  const height = getScaleProps(['height', 'h'])\n  const showAnimation = !disableSkeleton && width && height\n\n  const theme = useTheme()\n  const [loading, setLoading] = useState<boolean>(true)\n  const [showSkeleton, setShowSkeleton] = useState<boolean>(true)\n  const imageRef = useRef<HTMLImageElement>(null)\n  const url = useMemo(() => transformDataSource(src), [src])\n\n  const imageLoaded = () => {\n    if (!showAnimation) return\n    setLoading(false)\n  }\n\n  useEffect(() => {\n    if (!showAnimation) return\n    if (!imageRef.current) return\n    if (imageRef.current.complete) {\n      setLoading(false)\n      setShowSkeleton(false)\n    }\n  })\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      if (showAnimation) {\n        setShowSkeleton(false)\n      }\n      clearTimeout(timer)\n    }, maxDelay)\n    return () => clearTimeout(timer)\n  }, [loading])\n\n  return (\n    <div className={useClasses('image', className)}>\n      {showSkeleton && showAnimation && <ImageSkeleton opacity={loading ? 0.5 : 0} />}\n      <img ref={imageRef} onLoad={imageLoaded} src={url} {...props} />\n      <style jsx>{`\n        .image {\n          position: relative;\n          border-radius: ${theme.layout.radius};\n          overflow: hidden;\n          max-width: 100%;\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0)}\n            ${SCALES.ml(0, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n        }\n\n        img {\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          object-fit: scale-down;\n          display: inline-block;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nImageComponent.defaultProps = defaultProps\nImageComponent.displayName = 'GeistImage'\nconst Image = withScale(ImageComponent)\nexport default Image\n"
  },
  {
    "path": "components/image/index.ts",
    "content": "import Image from './image'\nimport ImageBrowser from './image-browser'\n\nexport type ImageComponentType = typeof Image & {\n  Browser: typeof ImageBrowser\n}\n;(Image as ImageComponentType).Browser = ImageBrowser\n\nexport type { ImageProps } from './image'\nexport type { ImageBrowserProps, ImageAnchorProps } from './image-browser'\nexport default Image as ImageComponentType\n"
  },
  {
    "path": "components/image/styles.ts",
    "content": "import { GeistUIThemesPalette } from '../themes/presets'\n\nexport type BrowserColors = {\n  color: string\n  barBgColor: string\n  inputBgColor: string\n  borderColor: string\n  titleColor: string\n}\n\nexport const getBrowserColors = (\n  invert: boolean,\n  palette: GeistUIThemesPalette,\n): BrowserColors => {\n  return invert\n    ? {\n        color: palette.background,\n        barBgColor: palette.foreground,\n        inputBgColor: palette.accents_8,\n        borderColor: palette.accents_7,\n        titleColor: palette.accents_2,\n      }\n    : {\n        color: palette.foreground,\n        barBgColor: palette.background,\n        inputBgColor: palette.accents_1,\n        borderColor: palette.border,\n        titleColor: palette.accents_5,\n      }\n}\n"
  },
  {
    "path": "components/index.ts",
    "content": "// @ts-ignore\n/// <reference types=\"styled-jsx\" />\n\nexport { default as AutoComplete } from './auto-complete'\nexport type { AutoCompleteProps } from './auto-complete'\n\nexport { default as Avatar } from './avatar'\nexport type { AvatarProps, AvatarGroupProps } from './avatar'\n\nexport { default as Badge } from './badge'\nexport type { BadgeProps, BadgeAnchorProps } from './badge'\n\nexport { default as Breadcrumbs } from './breadcrumbs'\nexport type {\n  BreadcrumbsProps,\n  BreadcrumbsItemProps,\n  BreadcrumbsSeparatorProps,\n} from './breadcrumbs'\n\nexport { default as Button } from './button'\nexport type { ButtonProps } from './button'\n\nexport { default as ButtonDropdown } from './button-dropdown'\nexport type { ButtonDropdownProps, ButtonDropdownItemProps } from './button-dropdown'\n\nexport { default as ButtonGroup } from './button-group'\nexport type { ButtonGroupProps } from './button-group'\n\nexport { default as Capacity } from './capacity'\nexport type { CapacityProps } from './capacity'\n\nexport { default as Card } from './card'\nexport type { CardProps, CardContentProps, CardFooterProps } from './card'\n\nexport { default as Checkbox } from './checkbox'\nexport type { CheckboxProps, CheckboxGroupProps } from './checkbox'\n\nexport { default as Code } from './code'\nexport type { CodeProps } from './code'\n\nexport { default as Collapse } from './collapse'\nexport type { CollapseProps, CollapseGroupProps } from './collapse'\n\nexport { default as Description } from './description'\nexport type { DescriptionProps } from './description'\n\nexport { default as Display } from './display'\nexport type { DisplayProps } from './display'\n\nexport { default as Divider } from './divider'\nexport type { DividerProps } from './divider'\n\nexport { default as Dot } from './dot'\nexport type { DotProps } from './dot'\n\nexport { default as Drawer } from './drawer'\nexport type { DrawerProps } from './drawer'\n\nexport { default as Fieldset } from './fieldset'\nexport type {\n  FieldsetProps,\n  FieldsetTitleProps,\n  FieldsetSubtitleProps,\n  FieldsetGroupProps,\n  FieldsetFooterProps,\n  FieldsetContentProps,\n} from './fieldset'\n\nexport { default as GeistProvider } from './geist-provider'\nexport type { GeistProviderProps } from './geist-provider'\n\nexport { default as Grid } from './grid'\nexport type { GridProps, GridContainerProps } from './grid'\n\nexport { default as Image } from './image'\nexport type { ImageProps, ImageBrowserProps } from './image'\n\nexport { default as Input } from './input'\nexport type { InputProps, InputPasswordProps } from './input'\n\nexport { default as Keyboard } from './keyboard'\nexport type { KeyboardProps } from './keyboard'\n\nexport { default as Link } from './link'\nexport type { LinkProps } from './link'\n\nexport { default as Loading } from './loading'\nexport type { LoadingProps } from './loading'\n\nexport { default as Modal } from './modal'\nexport type {\n  ModalProps,\n  ModalTitleProps,\n  ModalSubtitleProps,\n  ModalContentProps,\n  ModalActionProps,\n} from './modal'\n\nexport { default as Note } from './note'\nexport type { NoteProps } from './note'\n\nexport { default as Page } from './page'\nexport type {\n  PageProps,\n  PageHeaderProps,\n  PageContentProps,\n  PageFooterProps,\n} from './page'\n\nexport { default as Pagination } from './pagination'\nexport type {\n  PaginationProps,\n  PaginationNextProps,\n  PaginationPreviousProps,\n} from './pagination'\n\nexport { default as Popover } from './popover'\nexport type { PopoverProps, PopoverItemProps } from './popover'\n\nexport { default as Progress } from './progress'\nexport type { ProgressProps } from './progress'\n\nexport { default as Radio } from './radio'\nexport type { RadioProps, RadioGroupProps, RadioDescriptionProps } from './radio'\n\nexport { default as Rating } from './rating'\nexport type { RatingProps } from './rating'\n\nexport { default as Select } from './select'\nexport type { SelectProps, SelectOptionProps } from './select'\n\nexport { default as Slider } from './slider'\nexport type { SliderProps } from './slider'\n\nexport { default as Snippet } from './snippet'\nexport type { SnippetProps } from './snippet'\n\nexport { default as Spacer } from './spacer'\nexport type { SpacerProps } from './spacer'\n\nexport { default as Spinner } from './spinner'\nexport type { SpinnerProps } from './spinner'\n\nexport { default as Table } from './table'\nexport type { TableProps, TableColumnProps } from './table'\n\nexport { default as Tabs } from './tabs'\nexport type { TabsProps } from './tabs'\n\nexport { default as Tag } from './tag'\nexport type { TagProps } from './tag'\n\nexport { default as Text } from './text'\nexport type { TextProps } from './text'\n\nexport { default as Textarea } from './textarea'\nexport type { TextareaProps } from './textarea'\n\nexport { default as Themes } from './themes'\nexport type { GeistUIThemes, GeistUserTheme } from './themes'\n\nexport { default as Toggle } from './toggle'\nexport type { ToggleProps } from './toggle'\n\nexport { default as Tooltip } from './tooltip'\nexport type { TooltipProps } from './tooltip'\n\nexport { default as Tree } from './tree'\nexport type { TreeProps } from './tree'\n\nexport { default as useAllThemes } from './use-all-themes'\nexport type { AllThemesConfig } from './use-all-themes'\n\nexport { default as useToasts } from './use-toasts'\nexport type { Toast, ToastInput, ToastAction, ToastLayout } from './use-toasts'\n\nexport { default as User } from './user'\nexport type { UserProps } from './user'\n\nexport { default as useBodyScroll } from './use-body-scroll'\nexport type { BodyScrollOptions } from './use-body-scroll'\n\nexport { default as useClipboard } from './use-clipboard'\nexport type { UseClipboardOptions } from './use-clipboard'\n\nexport { default as useMediaQuery } from './use-media-query'\nexport type { ResponsiveOptions, ResponsiveBreakpoint } from './use-media-query'\n\nexport { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard'\nexport type { KeyboardOptions, UseKeyboardHandler } from './use-keyboard'\n\nexport { default as useInput } from './use-input'\nexport { default as useModal } from './use-modal'\nexport { default as useTabs } from './use-tabs'\nexport { default as useClickAway } from './use-click-away'\nexport { default as useCurrentState } from './use-current-state'\nexport { default as CssBaseline } from './css-baseline'\nexport { default as useTheme } from './use-theme'\nexport { default as useClasses } from './use-classes'\nexport { default as useScale } from './use-scale'\nexport { withScale, ScalePropKeys, ScaleContext } from './use-scale'\nexport type {\n  ScaleProps,\n  ScaleConfig,\n  GetScalePropsFunction,\n  GetAllScalePropsFunction,\n} from './use-scale'\n\nexport { useRect } from './utils/layouts'\nexport type { ReactiveDomReact } from './utils/layouts'\nexport { default as Highlight } from './shared/highlight'\nexport type { HighlightProps } from './shared/highlight'\n"
  },
  {
    "path": "components/input/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Input should be work with icon 1`] = `\n\"<div><div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper\\\\\"><span class=\\\\\"input-icon\\\\\"><span>test-icon</span><style>\n        .input-icon {\n          box-sizing: border-box;\n          display: inline-flex;\n          width: calc(var(--input-height) - 2px);\n          flex-shrink: 0;\n          height: 100%;\n          align-items: center;\n          justify-content: center;\n          margin: 0;\n          padding: 0;\n          line-height: 1;\n          position: relative;\n          cursor: default;\n          pointer-events: none;\n        }\n        .input-icon :global(svg) {\n          width: calc(var(--input-height) - 2px);\n          height: calc(var(--input-height) - 2px);\n          transform: scale(0.44);\n        }\n      </style></span><input type=\\\\\"text\\\\\" class=\\\\\"left-icon\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div><div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper\\\\\"><input type=\\\\\"text\\\\\" class=\\\\\"right-icon\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"input-icon\\\\\"><span>test-icon</span><style>\n        .input-icon {\n          box-sizing: border-box;\n          display: inline-flex;\n          width: calc(var(--input-height) - 2px);\n          flex-shrink: 0;\n          height: 100%;\n          align-items: center;\n          justify-content: center;\n          margin: 0;\n          padding: 0;\n          line-height: 1;\n          position: relative;\n          cursor: default;\n          pointer-events: none;\n        }\n        .input-icon :global(svg) {\n          width: calc(var(--input-height) - 2px);\n          height: calc(var(--input-height) - 2px);\n          transform: scale(0.44);\n        }\n      </style></span></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div></div>\"\n`;\n\nexports[`Input should be work with label 1`] = `\n\"<div><div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><span class=\\\\\"\\\\\">label<style>\n        span {\n          display: inline-flex;\n          width: initial;\n          height: 100%;\n          align-items: center;\n          pointer-events: none;\n          margin: 0;\n          padding: 0 8pt;\n          color: #888;\n          background-color: #fafafa;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n          border-top: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: inherit;\n          line-height: 1;\n        }\n\n        span.right {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n          border-left: 0;\n          border-right: 1px solid #eaeaea;\n        }\n      </style></span><div class=\\\\\"input-wrapper  left-label\\\\\"><input type=\\\\\"text\\\\\" class=\\\\\"\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div><div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper  right-label\\\\\"><input type=\\\\\"text\\\\\" class=\\\\\"\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"></div><span class=\\\\\"right\\\\\">label<style>\n        span {\n          display: inline-flex;\n          width: initial;\n          height: 100%;\n          align-items: center;\n          pointer-events: none;\n          margin: 0;\n          padding: 0 8pt;\n          color: #888;\n          background-color: #fafafa;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n          border-top: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-bottom: 1px solid #eaeaea;\n          font-size: inherit;\n          line-height: 1;\n        }\n\n        span.right {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n          border-left: 0;\n          border-right: 1px solid #eaeaea;\n        }\n      </style></span></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div><div class=\\\\\"with-label\\\\\"><label><span>Block Label</span><style>\n        label {\n          display: block;\n          font-weight: normal;\n          color: #444;\n          padding: 0 0 0 1px;\n          margin-bottom: 0.5em;\n          font-size: 1em;\n          line-height: 1.5;\n        }\n\n        label > :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        label > :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      </style></label><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper\\\\\"><input type=\\\\\"text\\\\\" class=\\\\\"\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div></div>\"\n`;\n\nexports[`Input should work with different status 1`] = `\n\"<div><div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper\\\\\"><input type=\\\\\"text\\\\\" class=\\\\\"\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #666;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div><div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper\\\\\"><input type=\\\\\"text\\\\\" class=\\\\\"\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #3291ff;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #0070f3;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div><div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper\\\\\"><input type=\\\\\"text\\\\\" class=\\\\\"\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #f7b955;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #f5a623;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/input/__tests__/__snapshots__/password.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`InputPassword should render correctly 1`] = `\n\"<div class=\\\\\"with-label\\\\\"><div class=\\\\\"input-container\\\\\"><div class=\\\\\"input-wrapper\\\\\"><input type=\\\\\"password\\\\\" class=\\\\\"right-icon\\\\\" placeholder=\\\\\"\\\\\" autocomplete=\\\\\"off\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"input-icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentColor;\\\\\"><path d=\\\\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\\\\"></path><circle cx=\\\\\"12\\\\\" cy=\\\\\"12\\\\\" r=\\\\\"3\\\\\"></circle></svg><style>\n        .input-icon {\n          box-sizing: border-box;\n          display: inline-flex;\n          width: calc(var(--input-height) - 2px);\n          flex-shrink: 0;\n          height: 100%;\n          align-items: center;\n          justify-content: center;\n          margin: 0;\n          padding: 0;\n          line-height: 1;\n          position: relative;\n          cursor: pointer;\n          pointer-events: auto;\n        }\n        .input-icon :global(svg) {\n          width: calc(var(--input-height) - 2px);\n          height: calc(var(--input-height) - 2px);\n          transform: scale(0.44);\n        }\n      </style></span></div></div><style>\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: calc(2.25 * 16px);\n            font-size: calc(0.875 * 16px);\n            width: initial;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: initial;\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: #666;\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: calc(0.875 * 16px);\n            background-color: transparent;\n            border: none;\n            color: #000;\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: #999;\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n            -webkit-text-fill-color: #000 !important;\n          }\n        </style></div>\"\n`;\n"
  },
  {
    "path": "components/input/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Input } from 'components'\nimport { nativeEvent } from 'tests/utils'\n\ndescribe('Input', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Input placeholder=\"placeholder\" />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different status', () => {\n    const wrapper = mount(\n      <div>\n        <Input type=\"secondary\" />\n        <Input type=\"success\" />\n        <Input type=\"warning\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('should be work with label', () => {\n    const wrapper = mount(\n      <div>\n        <Input label=\"label\" />\n        <Input labelRight=\"label\" />\n        <Input>\n          <span>Block Label</span>\n        </Input>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n  it('should be work with icon', () => {\n    const wrapper = mount(\n      <div>\n        <Input icon={<span>test-icon</span>} />\n        <Input iconRight={<span>test-icon</span>} />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('should set input from value', () => {\n    let wrapper = mount(<Input initialValue=\"test\" />)\n    let input = wrapper.find('input').getDOMNode() as HTMLInputElement\n    expect(input.value).toEqual('test')\n\n    wrapper = mount(<Input value=\"test2\" />)\n    input = wrapper.find('input').getDOMNode() as HTMLInputElement\n    expect(input.value).toEqual('test2')\n\n    wrapper.setProps({ value: 'test3' })\n    input = wrapper.find('input').getDOMNode() as HTMLInputElement\n    expect(input.value).toEqual('test3')\n  })\n\n  it('should trigger event when input changed', () => {\n    let value = ''\n    const callback = jest\n      .fn()\n      .mockImplementation(\n        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value),\n      )\n    const wrapper = mount(<Input onChange={callback} />)\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', { target: { value: 'test' } })\n    expect(callback).toHaveBeenCalled()\n    expect(value).toEqual('test')\n  })\n\n  it('should ignore event when input disabled', () => {\n    const callback = jest.fn()\n    const wrapper = mount(<Input onChange={callback} disabled />)\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', { target: { value: 'test' } })\n    expect(callback).not.toHaveBeenCalled()\n  })\n\n  it('should ignore event when input readonly', () => {\n    const callback = jest.fn()\n    const wrapper = mount(<Input onChange={callback} readOnly />)\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', { target: { value: 'test' } })\n    expect(callback).not.toHaveBeenCalled()\n  })\n\n  it('should clear text', () => {\n    let value = ''\n    const callback = jest\n      .fn()\n      .mockImplementation(\n        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value),\n      )\n    const clearHandler = jest.fn()\n    const wrapper = mount(\n      <Input onChange={callback} clearable onClearClick={clearHandler} />,\n    )\n\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', { target: { value: 'test' } })\n    expect(callback).toHaveBeenCalled()\n    expect(value).toEqual('test')\n\n    wrapper.find('.clear-icon').at(0).simulate('click', nativeEvent)\n    expect(clearHandler).toHaveBeenCalled()\n    expect(value).toEqual('')\n  })\n\n  it('should trigger focus correctly', () => {\n    const focus = jest.fn()\n    const blur = jest.fn()\n    const wrapper = mount(<Input onFocus={focus} onBlur={blur} />)\n\n    const input = wrapper.find('input').at(0)\n    input.simulate('focus')\n    expect(focus).toHaveBeenCalled()\n    input.simulate('blur')\n    expect(blur).toHaveBeenCalled()\n  })\n\n  it('should trigger icon event', () => {\n    const click = jest.fn()\n    const wrapper = mount(\n      <Input icon={<span id=\"test-icon\">icon</span>} onIconClick={click} iconClickable />,\n    )\n    wrapper.find('#test-icon').simulate('click', nativeEvent)\n    expect(click).toHaveBeenCalled()\n  })\n\n  it('should ignore icon event when input disabled', () => {\n    const click = jest.fn()\n    const wrapper = mount(\n      <Input\n        icon={<span id=\"test-icon\">icon</span>}\n        onIconClick={click}\n        iconClickable\n        disabled\n      />,\n    )\n    wrapper.find('#test-icon').simulate('click', nativeEvent)\n    expect(click).not.toHaveBeenCalled()\n  })\n\n  // check ref is available: https://github.com/geist-org/geist-ui/issues/189\n  it('should forward ref by default', () => {\n    const ref = React.createRef<HTMLInputElement>()\n    const wrapper = mount(<Input ref={ref} />)\n    expect(ref.current).not.toBeNull()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/input/__tests__/password.test.tsx",
    "content": "import React from 'react'\nimport { mount, shallow } from 'enzyme'\nimport { Input } from 'components'\nimport { nativeEvent } from 'tests/utils'\n\ndescribe('InputPassword', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Input.Password />)\n    const el = wrapper.find('input').getDOMNode() as HTMLInputElement\n    expect(el.type).toEqual('password')\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should toggle input type', () => {\n    const wrapper = mount(<Input.Password />)\n    wrapper.find('.input-icon').simulate('click', nativeEvent)\n    const el = wrapper.find('input').getDOMNode() as HTMLInputElement\n    expect(el.type).toEqual('text')\n  })\n\n  it('should hide toggle icon', () => {\n    const wrapper = mount(<Input.Password hideToggle />)\n    expect(wrapper.find('.input-icon').length).toBe(0)\n  })\n\n  it('should be pass all native scale props', () => {\n    const width = 'calc(100% - 10px)'\n    const height = Math.random().toString(16).slice(-8)\n    const wrapper = shallow(<Input.Password w={width} h={height} />)\n    const html = wrapper.html()\n    expect(html).toContain(width)\n    expect(html).toContain(height)\n  })\n})\n"
  },
  {
    "path": "components/input/index.ts",
    "content": "import Input from './input'\nimport Textarea from '../textarea'\nimport InputPassword from './password'\n\nexport type InputComponentType = typeof Input & {\n  Textarea: typeof Textarea\n  Password: typeof InputPassword\n}\n;(Input as InputComponentType).Textarea = Textarea\n;(Input as InputComponentType).Password = InputPassword\n\nexport type { InputProps } from './input'\nexport type { InputTypes } from './input-props'\nexport type { InputPasswordProps } from './password'\nexport type { TextareaProps } from '../textarea/textarea'\nexport default Input as InputComponentType\n"
  },
  {
    "path": "components/input/input-block-label.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\n\nexport interface InputBlockLabelLabel {}\n\nconst InputBlockLabelComponent: React.FC<\n  React.PropsWithChildren<InputBlockLabelLabel>\n> = ({ children }) => {\n  const theme = useTheme()\n\n  return (\n    <label>\n      {children}\n      <style jsx>{`\n        label {\n          display: block;\n          font-weight: normal;\n          color: ${theme.palette.accents_6};\n          padding: 0 0 0 1px;\n          margin-bottom: 0.5em;\n          font-size: 1em;\n          line-height: 1.5;\n        }\n\n        label > :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        label > :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      `}</style>\n    </label>\n  )\n}\n\nInputBlockLabelComponent.displayName = 'GeistInputBlockLabel'\nconst InputBlockLabel = React.memo(InputBlockLabelComponent)\nexport default InputBlockLabel\n"
  },
  {
    "path": "components/input/input-icon-clear.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  visible: boolean\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void\n  disabled?: boolean\n}\n\nconst InputIconClear: React.FC<Props> = ({ onClick, disabled, visible }) => {\n  const theme = useTheme()\n  const classes = useClasses('clear-icon', { visible })\n\n  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    event.stopPropagation()\n    event.nativeEvent.stopImmediatePropagation()\n    onClick && onClick(event)\n  }\n  return (\n    <div onClick={clickHandler} className={classes}>\n      <svg\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        fill=\"none\"\n        shapeRendering=\"geometricPrecision\">\n        <path d=\"M18 6L6 18\" />\n        <path d=\"M6 6l12 12\" />\n      </svg>\n\n      <style jsx>{`\n        .clear-icon {\n          box-sizing: border-box;\n          display: inline-flex;\n          width: calc(var(--input-height) - 2px);\n          flex-shrink: 0;\n          height: 100%;\n          align-items: center;\n          justify-content: center;\n          cursor: ${disabled ? 'not-allowed' : 'pointer'};\n          transition: color 150ms ease 0s;\n          margin: 0;\n          padding: 0;\n          color: ${theme.palette.accents_3};\n          visibility: hidden;\n          opacity: 0;\n        }\n\n        .visible {\n          visibility: visible;\n          opacity: 1;\n        }\n\n        .clear-icon:hover {\n          color: ${disabled ? theme.palette.accents_3 : theme.palette.foreground};\n        }\n\n        svg {\n          color: currentColor;\n          width: calc(var(--input-height) - 2px);\n          height: calc(var(--input-height) - 2px);\n          transform: scale(0.44);\n        }\n      `}</style>\n    </div>\n  )\n}\n\nconst MemoInputIconClear = React.memo(InputIconClear)\n\nexport default MemoInputIconClear\n"
  },
  {
    "path": "components/input/input-icon.tsx",
    "content": "import React from 'react'\n\nexport interface InputIconProps {\n  icon: React.ReactNode\n  clickable: boolean\n  onClick: (e: React.MouseEvent<HTMLDivElement>) => void\n}\n\nconst InputIconComponent: React.FC<InputIconProps> = ({ icon, clickable, onClick }) => {\n  return (\n    <span className=\"input-icon\" onClick={onClick}>\n      {icon}\n      <style jsx>{`\n        .input-icon {\n          box-sizing: border-box;\n          display: inline-flex;\n          width: calc(var(--input-height) - 2px);\n          flex-shrink: 0;\n          height: 100%;\n          align-items: center;\n          justify-content: center;\n          margin: 0;\n          padding: 0;\n          line-height: 1;\n          position: relative;\n          cursor: ${clickable ? 'pointer' : 'default'};\n          pointer-events: ${clickable ? 'auto' : 'none'};\n        }\n        .input-icon :global(svg) {\n          width: calc(var(--input-height) - 2px);\n          height: calc(var(--input-height) - 2px);\n          transform: scale(0.44);\n        }\n      `}</style>\n    </span>\n  )\n}\n\nInputIconComponent.displayName = 'GeistInputIcon'\nconst InputIcon = React.memo(InputIconComponent)\nexport default InputIcon\n"
  },
  {
    "path": "components/input/input-label.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\n\nexport interface InputLabel {\n  isRight?: boolean\n}\n\nconst InputLabel: React.FC<React.PropsWithChildren<InputLabel>> = ({\n  children,\n  isRight,\n}) => {\n  const theme = useTheme()\n\n  return (\n    <span className={isRight ? 'right' : ''}>\n      {children}\n      <style jsx>{`\n        span {\n          display: inline-flex;\n          width: initial;\n          height: 100%;\n          align-items: center;\n          pointer-events: none;\n          margin: 0;\n          padding: 0 ${theme.layout.gapHalf};\n          color: ${theme.palette.accents_4};\n          background-color: ${theme.palette.accents_1};\n          border-top-left-radius: ${theme.layout.radius};\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-top: 1px solid ${theme.palette.border};\n          border-left: 1px solid ${theme.palette.border};\n          border-bottom: 1px solid ${theme.palette.border};\n          font-size: inherit;\n          line-height: 1;\n        }\n\n        span.right {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n          border-top-right-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n          border-left: 0;\n          border-right: 1px solid ${theme.palette.border};\n        }\n      `}</style>\n    </span>\n  )\n}\n\nconst MemoInputLabel = React.memo(InputLabel)\n\nexport default MemoInputLabel\n"
  },
  {
    "path": "components/input/input-props.ts",
    "content": "import React from 'react'\nimport { NormalTypes } from '../utils/prop-types'\n\nexport type InputTypes = NormalTypes\nexport interface Props {\n  value?: string\n  initialValue?: string\n  placeholder?: string\n  type?: InputTypes\n  htmlType?: string\n  readOnly?: boolean\n  disabled?: boolean\n  label?: string\n  labelRight?: string\n  icon?: React.ReactNode\n  iconRight?: React.ReactNode\n  iconClickable?: boolean\n  className?: string\n  clearable?: boolean\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n  onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void\n  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void\n  onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void\n  autoComplete?: string\n}\n\nexport const defaultProps = {\n  disabled: false,\n  readOnly: false,\n  clearable: false,\n  iconClickable: false,\n  type: 'default' as InputTypes,\n  htmlType: 'text',\n  autoComplete: 'off',\n  className: '',\n  placeholder: '',\n  initialValue: '',\n}\n"
  },
  {
    "path": "components/input/input.tsx",
    "content": "import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport useTheme from '../use-theme'\nimport InputLabel from './input-label'\nimport InputBlockLabel from './input-block-label'\nimport InputIcon from './input-icon'\nimport InputClearIcon from './input-icon-clear'\nimport { getColors } from './styles'\nimport { Props, defaultProps } from './input-props'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ntype NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>\nexport type InputProps = Props & NativeAttrs\n\nconst simulateChangeEvent = (\n  el: HTMLInputElement,\n  event: React.MouseEvent<HTMLDivElement>,\n): React.ChangeEvent<HTMLInputElement> => {\n  return {\n    ...event,\n    target: el,\n    currentTarget: el,\n  }\n}\n\nconst InputComponent = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<InputProps>\n>(\n  (\n    {\n      label,\n      labelRight,\n      type,\n      htmlType,\n      icon,\n      iconRight,\n      iconClickable,\n      onIconClick,\n      initialValue,\n      onChange,\n      readOnly,\n      value,\n      onClearClick,\n      clearable,\n      className,\n      onBlur,\n      onFocus,\n      autoComplete,\n      placeholder,\n      children,\n      disabled,\n      ...props\n    }: React.PropsWithChildren<InputProps> & typeof defaultProps,\n    ref: React.Ref<HTMLInputElement | null>,\n  ) => {\n    const theme = useTheme()\n    const { SCALES } = useScale()\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle(ref, () => inputRef.current)\n\n    const [selfValue, setSelfValue] = useState<string>(initialValue)\n    const [hover, setHover] = useState<boolean>(false)\n    const isControlledComponent = useMemo(() => value !== undefined, [value])\n    const labelClasses = useMemo(\n      () => (labelRight ? 'right-label' : label ? 'left-label' : ''),\n      [label, labelRight],\n    )\n    const iconClasses = useMemo(\n      () => (iconRight ? 'right-icon' : icon ? 'left-icon' : ''),\n      [icon, iconRight],\n    )\n    const { color, borderColor, hoverBorder } = useMemo(\n      () => getColors(theme.palette, type),\n      [theme.palette, type],\n    )\n\n    const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled || readOnly) return\n      setSelfValue(event.target.value)\n      onChange && onChange(event)\n    }\n    const clearHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n      setSelfValue('')\n      onClearClick && onClearClick(event)\n      /* istanbul ignore next */\n      if (!inputRef.current) return\n\n      const changeEvent = simulateChangeEvent(inputRef.current, event)\n      changeEvent.target.value = ''\n      onChange && onChange(changeEvent)\n      inputRef.current.focus()\n    }\n\n    const focusHandler = (e: React.FocusEvent<HTMLInputElement>) => {\n      setHover(true)\n      onFocus && onFocus(e)\n    }\n    const blurHandler = (e: React.FocusEvent<HTMLInputElement>) => {\n      setHover(false)\n      onBlur && onBlur(e)\n    }\n\n    const iconClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      onIconClick && onIconClick(e)\n    }\n    const iconProps = useMemo(\n      () => ({\n        clickable: iconClickable,\n        onClick: iconClickHandler,\n      }),\n      [iconClickable, iconClickHandler],\n    )\n\n    useEffect(() => {\n      if (isControlledComponent) {\n        setSelfValue(value as string)\n      }\n    })\n\n    const controlledValue = isControlledComponent\n      ? { value: selfValue }\n      : { defaultValue: initialValue }\n    const inputProps = {\n      ...props,\n      ...controlledValue,\n    }\n\n    return (\n      <div className=\"with-label\">\n        {children && <InputBlockLabel>{children}</InputBlockLabel>}\n        <div className={useClasses('input-container', className)}>\n          {label && <InputLabel>{label}</InputLabel>}\n          <div className={useClasses('input-wrapper', { hover, disabled }, labelClasses)}>\n            {icon && <InputIcon icon={icon} {...iconProps} />}\n            <input\n              type={htmlType}\n              ref={inputRef}\n              className={useClasses({ disabled }, iconClasses)}\n              placeholder={placeholder}\n              disabled={disabled}\n              readOnly={readOnly}\n              onFocus={focusHandler}\n              onBlur={blurHandler}\n              onChange={changeHandler}\n              autoComplete={autoComplete}\n              {...inputProps}\n            />\n            {clearable && (\n              <InputClearIcon\n                visible={Boolean(inputRef.current && inputRef.current.value !== '')}\n                disabled={disabled || readOnly}\n                onClick={clearHandler}\n              />\n            )}\n            {iconRight && <InputIcon icon={iconRight} {...iconProps} />}\n          </div>\n          {labelRight && <InputLabel isRight={true}>{labelRight}</InputLabel>}\n        </div>\n        <style jsx>{`\n          .with-label {\n            display: inline-block;\n            box-sizing: border-box;\n            -webkit-box-align: center;\n            --input-height: ${SCALES.height(2.25)};\n            font-size: ${SCALES.font(0.875)};\n            width: ${SCALES.width(1, 'initial')};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n\n          .input-container {\n            display: inline-flex;\n            align-items: center;\n            width: ${SCALES.width(1, 'initial')};\n            height: var(--input-height);\n          }\n\n          .input-wrapper {\n            display: inline-flex;\n            vertical-align: middle;\n            align-items: center;\n            height: 100%;\n            flex: 1;\n            user-select: none;\n            border-radius: ${theme.layout.radius};\n            border: 1px solid ${borderColor};\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n          }\n\n          .input-wrapper.left-label {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n\n          .input-wrapper.right-label {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n\n          .input-wrapper.disabled {\n            background-color: ${theme.palette.accents_1};\n            border-color: ${theme.palette.accents_2};\n            cursor: not-allowed;\n          }\n\n          input.disabled {\n            cursor: not-allowed;\n          }\n\n          .input-wrapper.hover {\n            border-color: ${hoverBorder};\n          }\n\n          input {\n            margin: 0.25em 0.625em;\n            padding: 0;\n            box-shadow: none;\n            font-size: ${SCALES.font(0.875)};\n            background-color: transparent;\n            border: none;\n            color: ${color};\n            outline: none;\n            border-radius: 0;\n            width: 100%;\n            min-width: 0;\n            -webkit-appearance: none;\n          }\n\n          input.left-icon {\n            margin-left: 0;\n          }\n\n          input.right-icon {\n            margin-right: 0;\n          }\n\n          ::placeholder,\n          ::-moz-placeholder,\n          :-ms-input-placeholder,\n          ::-webkit-input-placeholder {\n            color: ${theme.palette.accents_3};\n          }\n\n          ::-ms-reveal {\n            display: none !important;\n          }\n\n          input:-webkit-autofill,\n          input:-webkit-autofill:hover,\n          input:-webkit-autofill:active,\n          input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px ${theme.palette.background} inset !important;\n            -webkit-text-fill-color: ${color} !important;\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nInputComponent.defaultProps = defaultProps\nInputComponent.displayName = 'GeistInput'\nconst Input = withScale(InputComponent)\nexport default Input\n"
  },
  {
    "path": "components/input/password-icon.tsx",
    "content": "import React from 'react'\n\ninterface Props {\n  visible: boolean\n}\n\nconst PasswordIcon: React.FC<Props> = ({ visible }) => {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\"\n      style={{ color: 'currentColor' }}>\n      {!visible ? (\n        <>\n          <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n          <circle cx=\"12\" cy=\"12\" r=\"3\" />\n        </>\n      ) : (\n        <>\n          <path d=\"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24\" />\n          <path d=\"M1 1l22 22\" />\n        </>\n      )}\n    </svg>\n  )\n}\n\nconst MemoPasswordIcon = React.memo(PasswordIcon)\n\nexport default MemoPasswordIcon\n"
  },
  {
    "path": "components/input/password.tsx",
    "content": "import React, { useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { Props, defaultProps } from './input-props'\nimport PasswordIcon from './password-icon'\nimport Input from './input'\nimport { useScale, withScale } from '../use-scale'\n\ninterface PasswordProps extends Props {\n  hideToggle?: boolean\n}\n\nconst passwordDefaultProps = {\n  ...defaultProps,\n  hideToggle: false,\n}\n\ntype NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>\nexport type InputPasswordProps = PasswordProps & NativeAttrs\n\nconst InputPasswordComponent = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<InputPasswordProps>\n>(\n  (\n    {\n      hideToggle,\n      children,\n      ...props\n    }: React.PropsWithChildren<InputPasswordProps> & typeof defaultProps,\n    ref: React.Ref<HTMLInputElement | null>,\n  ) => {\n    const { getAllScaleProps } = useScale()\n    const inputRef = useRef<HTMLInputElement>(null)\n    const [visible, setVisible] = useState<boolean>(false)\n    useImperativeHandle(ref, () => inputRef.current)\n\n    const iconClickHandler = () => {\n      setVisible(v => !v)\n      /* istanbul ignore next */\n      if (inputRef && inputRef.current) {\n        inputRef.current.focus()\n      }\n    }\n\n    const inputProps = useMemo(\n      () => ({\n        ...props,\n        ref: inputRef,\n        iconClickable: true,\n        onIconClick: iconClickHandler,\n        htmlType: visible ? 'text' : 'password',\n      }),\n      [props, iconClickHandler, visible, inputRef],\n    )\n    const icon = useMemo(() => {\n      if (hideToggle) return null\n      return <PasswordIcon visible={visible} />\n    }, [hideToggle, visible])\n\n    return (\n      <Input iconRight={icon} {...getAllScaleProps()} {...inputProps}>\n        {children}\n      </Input>\n    )\n  },\n)\n\nInputPasswordComponent.defaultProps = passwordDefaultProps\nInputPasswordComponent.displayName = 'GeistInputPassword'\nconst InputPassword = withScale(InputPasswordComponent)\nexport default InputPassword\n"
  },
  {
    "path": "components/input/styles.ts",
    "content": "import { NormalTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\n\nexport type InputColor = {\n  color: string\n  borderColor: string\n  hoverBorder: string\n}\n\nexport const getColors = (\n  palette: GeistUIThemesPalette,\n  status?: NormalTypes,\n): InputColor => {\n  const colors: { [key in NormalTypes]: InputColor } = {\n    default: {\n      color: palette.foreground,\n      borderColor: palette.border,\n      hoverBorder: palette.accents_5,\n    },\n    secondary: {\n      color: palette.foreground,\n      borderColor: palette.secondary,\n      hoverBorder: palette.secondary,\n    },\n    success: {\n      color: palette.foreground,\n      borderColor: palette.successLight,\n      hoverBorder: palette.success,\n    },\n    warning: {\n      color: palette.foreground,\n      borderColor: palette.warningLight,\n      hoverBorder: palette.warning,\n    },\n    error: {\n      color: palette.error,\n      borderColor: palette.error,\n      hoverBorder: palette.errorDark,\n    },\n  }\n\n  if (!status) return colors.default\n  return colors[status]\n}\n"
  },
  {
    "path": "components/keyboard/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Keyboard should render correctly 1`] = `\n\"<kbd class=\\\\\"\\\\\"><span>F</span><style>\n        kbd {\n          line-height: 2em;\n          text-align: center;\n          display: inline-block;\n          color: #666;\n          background-color: #fafafa;\n          font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n          border-radius: 6px;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: fit-content;\n          height: auto;\n          min-width: 2em;\n          min-height: 2em;\n          padding: 0 calc(0.34 * 16px) 0 calc(0.34 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        span {\n          line-height: 2em;\n          font-size: 1em;\n          text-align: center;\n        }\n\n        span + span {\n          margin-left: 0.3em;\n        }\n      </style></kbd>\"\n`;\n\nexports[`Keyboard should work with modifiers 1`] = `\n\"<div><kbd class=\\\\\"\\\\\"><span>⌘</span><span>F</span><style>\n        kbd {\n          line-height: 2em;\n          text-align: center;\n          display: inline-block;\n          color: #666;\n          background-color: #fafafa;\n          font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n          border-radius: 6px;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: fit-content;\n          height: auto;\n          min-width: 2em;\n          min-height: 2em;\n          padding: 0 calc(0.34 * 16px) 0 calc(0.34 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        span {\n          line-height: 2em;\n          font-size: 1em;\n          text-align: center;\n        }\n\n        span + span {\n          margin-left: 0.3em;\n        }\n      </style></kbd><kbd class=\\\\\"\\\\\"><span>⇧</span><span>F</span><style>\n        kbd {\n          line-height: 2em;\n          text-align: center;\n          display: inline-block;\n          color: #666;\n          background-color: #fafafa;\n          font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n          border-radius: 6px;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: fit-content;\n          height: auto;\n          min-width: 2em;\n          min-height: 2em;\n          padding: 0 calc(0.34 * 16px) 0 calc(0.34 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        span {\n          line-height: 2em;\n          font-size: 1em;\n          text-align: center;\n        }\n\n        span + span {\n          margin-left: 0.3em;\n        }\n      </style></kbd><kbd class=\\\\\"\\\\\"><span>⌥</span><span>F</span><style>\n        kbd {\n          line-height: 2em;\n          text-align: center;\n          display: inline-block;\n          color: #666;\n          background-color: #fafafa;\n          font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n          border-radius: 6px;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: fit-content;\n          height: auto;\n          min-width: 2em;\n          min-height: 2em;\n          padding: 0 calc(0.34 * 16px) 0 calc(0.34 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        span {\n          line-height: 2em;\n          font-size: 1em;\n          text-align: center;\n        }\n\n        span + span {\n          margin-left: 0.3em;\n        }\n      </style></kbd><kbd class=\\\\\"\\\\\"><span>⌃</span><span>F</span><style>\n        kbd {\n          line-height: 2em;\n          text-align: center;\n          display: inline-block;\n          color: #666;\n          background-color: #fafafa;\n          font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n          border-radius: 6px;\n          border: 1px solid #eaeaea;\n          font-size: calc(0.875 * 16px);\n          width: fit-content;\n          height: auto;\n          min-width: 2em;\n          min-height: 2em;\n          padding: 0 calc(0.34 * 16px) 0 calc(0.34 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        span {\n          line-height: 2em;\n          font-size: 1em;\n          text-align: center;\n        }\n\n        span + span {\n          margin-left: 0.3em;\n        }\n      </style></kbd></div>\"\n`;\n"
  },
  {
    "path": "components/keyboard/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Keyboard } from 'components'\n\ndescribe('Keyboard', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Keyboard>F</Keyboard>)\n\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with modifiers', () => {\n    const wrapper = mount(\n      <div>\n        <Keyboard command>F</Keyboard>\n        <Keyboard shift>F</Keyboard>\n        <Keyboard option>F</Keyboard>\n        <Keyboard ctrl>F</Keyboard>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/keyboard/index.ts",
    "content": "import Keyboard from './keyboard'\n\nexport type { KeyboardProps } from './keyboard'\nexport default Keyboard\n"
  },
  {
    "path": "components/keyboard/keyboard.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  command?: boolean\n  shift?: boolean\n  option?: boolean\n  ctrl?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  command: false,\n  shift: false,\n  option: false,\n  ctrl: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.KeygenHTMLAttributes<any>, keyof Props>\nexport type KeyboardProps = Props & NativeAttrs\n\nconst KeyboardComponent: React.FC<React.PropsWithChildren<KeyboardProps>> = ({\n  command,\n  shift,\n  option,\n  ctrl,\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<KeyboardProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n\n  return (\n    <kbd className={className} {...props}>\n      {command && <span>⌘</span>}\n      {shift && <span>⇧</span>}\n      {option && <span>⌥</span>}\n      {ctrl && <span>⌃</span>}\n      {children && <span>{children}</span>}\n\n      <style jsx>{`\n        kbd {\n          line-height: 2em;\n          text-align: center;\n          display: inline-block;\n          color: ${theme.palette.accents_5};\n          background-color: ${theme.palette.accents_1};\n          font-family: ${theme.font.sans};\n          border-radius: ${theme.layout.radius};\n          border: 1px solid ${theme.palette.accents_2};\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'fit-content')};\n          height: ${SCALES.height(1, 'auto')};\n          min-width: 2em;\n          min-height: 2em;\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0.34)} ${SCALES.pb(0)} ${SCALES.pl(0.34)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        span {\n          line-height: 2em;\n          font-size: 1em;\n          text-align: center;\n        }\n\n        span + span {\n          margin-left: 0.3em;\n        }\n      `}</style>\n    </kbd>\n  )\n}\n\nKeyboardComponent.defaultProps = defaultProps\nKeyboardComponent.displayName = 'GeistKeyboard'\nconst Keyboard = withScale(KeyboardComponent)\nexport default Keyboard\n"
  },
  {
    "path": "components/link/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Link should render correctly 1`] = `\n\"<div><a class=\\\\\"link\\\\\" href=\\\\\"https://geist-ui.dev\\\\\">link<style>\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        </style></a><a class=\\\\\"link\\\\\" href=\\\\\"https://geist-ui.dev\\\\\">link<style>\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: #0070f3;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: #3291ff;\n          }\n        </style></a><a class=\\\\\"link\\\\\" href=\\\\\"https://geist-ui.dev\\\\\">link<svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"0.9375em\\\\\" height=\\\\\"0.9375em\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" class=\\\\\"icon\\\\\"><path d=\\\\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\\\\"></path><path d=\\\\\"M15 3h6v6\\\\\"></path><path d=\\\\\"M10 14L21 3\\\\\"></path><style>\n        .icon {\n          margin: 0 0 -1px 0.1875em;\n          display: inline-flex;\n          align-self: center;\n          color: currentColor;\n        }\n      </style></svg><style>\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        </style></a><a class=\\\\\"link\\\\\" href=\\\\\"https://geist-ui.dev\\\\\">link<style>\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: inherit;\n            text-decoration: none;\n            border-radius: 0;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: underline;\n          }\n\n          .link:hover {\n            background-color: unset;\n            color: inherit;\n          }\n        </style></a><a class=\\\\\"link block\\\\\" href=\\\\\"https://geist-ui.dev\\\\\">link<style>\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: #0070f3;\n            text-decoration: none;\n            border-radius: 6px;\n            transition: color 200ms ease 0ms;\n            font-size: inherit;\n            width: fit-content;\n            height: auto;\n            margin: 0 0 0 0;\n            padding: 0 0 0 0;\n          }\n          .block {\n            padding: calc(0.125 * 16px) calc(0.25 * 16px) calc(0.125 * 16px)\n              calc(0.25 * 16px);\n            margin: 0 calc(-0.125 * 16px) 0\n              calc(-0.125 * 16px);\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: none;\n          }\n\n          .link:hover {\n            background-color: rgba(0, 112, 243, 0.1);\n            color: #3291ff;\n          }\n        </style></a></div>\"\n`;\n"
  },
  {
    "path": "components/link/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Link } from 'components'\n\ndescribe('Link', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <div>\n        <Link href=\"https://geist-ui.dev\">link</Link>\n        <Link href=\"https://geist-ui.dev\" color>\n          link\n        </Link>\n        <Link href=\"https://geist-ui.dev\" icon>\n          link\n        </Link>\n        <Link href=\"https://geist-ui.dev\" underline>\n          link\n        </Link>\n        <Link href=\"https://geist-ui.dev\" block>\n          link\n        </Link>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be no errors when href missing', () => {\n    const errorSpy = jest.spyOn(console, 'error')\n    const wrapper = mount(<Link />)\n    expect(errorSpy).not.toHaveBeenCalled()\n    expect(() => wrapper.unmount()).not.toThrow()\n    errorSpy.mockRestore()\n  })\n\n  it('should forward ref', () => {\n    let ref = React.createRef<HTMLAnchorElement>()\n    const errorSpy = jest.spyOn(console, 'error')\n    const wrapper = mount(<Link ref={ref} />)\n\n    expect(errorSpy).not.toHaveBeenCalled()\n    expect(ref.current).not.toBeNull()\n    expect(() => wrapper.unmount()).not.toThrow()\n    errorSpy.mockRestore()\n  })\n\n  it('an warning should be thrown when using the pure prop', () => {\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})\n    mount(<Link pure />)\n    expect(errorSpy).toHaveBeenCalled()\n    errorSpy.mockRestore()\n  })\n})\n"
  },
  {
    "path": "components/link/icon.tsx",
    "content": "import React from 'react'\n\nexport const LinkIconComponent: React.FC<unknown> = () => {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"0.9375em\"\n      height=\"0.9375em\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\"\n      className=\"icon\">\n      <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\" />\n      <path d=\"M15 3h6v6\" />\n      <path d=\"M10 14L21 3\" />\n\n      <style jsx>{`\n        .icon {\n          margin: 0 0 -1px 0.1875em;\n          display: inline-flex;\n          align-self: center;\n          color: currentColor;\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nLinkIconComponent.displayName = 'GeistLinkIcon'\nconst LinkIcon = React.memo(LinkIconComponent)\nexport default LinkIcon\n"
  },
  {
    "path": "components/link/index.ts",
    "content": "import Link from './link'\n\nexport type { LinkProps } from './link'\nexport default Link\n"
  },
  {
    "path": "components/link/link.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport LinkIcon from './icon'\nimport { addColorAlpha } from '../utils/color'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport interface Props {\n  href?: string\n  color?: boolean\n  icon?: boolean\n  underline?: boolean\n  block?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  href: '',\n  color: false,\n  icon: false,\n  underline: false,\n  block: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>\nexport type LinkProps = Props & NativeAttrs\n\nconst LinkComponent = React.forwardRef<\n  HTMLAnchorElement,\n  React.PropsWithChildren<LinkProps>\n>(\n  (\n    {\n      href,\n      color,\n      underline,\n      children,\n      className,\n      block,\n      icon,\n      ...props\n    }: React.PropsWithChildren<LinkProps> & typeof defaultProps,\n    ref: React.Ref<HTMLAnchorElement>,\n  ) => {\n    const theme = useTheme()\n    const { SCALES } = useScale()\n    const linkColor = color || block ? theme.palette.link : 'inherit'\n    const hoverColor = color || block ? theme.palette.successLight : 'inherit'\n    const decoration = underline ? 'underline' : 'none'\n    const classes = useClasses('link', { block }, className)\n\n    return (\n      <a className={classes} href={href} {...props} ref={ref}>\n        {children}\n        {icon && <LinkIcon />}\n        <style jsx>{`\n          .link {\n            display: inline-flex;\n            align-items: baseline;\n            line-height: inherit;\n            color: ${linkColor};\n            text-decoration: none;\n            border-radius: ${block ? theme.layout.radius : 0};\n            transition: color 200ms ease 0ms;\n            font-size: ${SCALES.font(1, 'inherit')};\n            width: ${SCALES.width(1, 'fit-content')};\n            height: ${SCALES.height(1, 'auto')};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          }\n          .block {\n            padding: ${SCALES.pt(0.125)} ${SCALES.pr(0.25)} ${SCALES.pb(0.125)}\n              ${SCALES.pl(0.25)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(-0.125)} ${SCALES.mb(0)}\n              ${SCALES.ml(-0.125)};\n          }\n\n          .link:hover,\n          .link:active,\n          .link:focus {\n            text-decoration: ${decoration};\n          }\n\n          .link:hover {\n            background-color: ${block ? addColorAlpha(theme.palette.link, 0.1) : 'unset'};\n            color: ${hoverColor};\n          }\n        `}</style>\n      </a>\n    )\n  },\n)\n\nLinkComponent.defaultProps = defaultProps\nLinkComponent.displayName = 'GeistLink'\nconst Link = withScale(LinkComponent)\nexport default Link\n"
  },
  {
    "path": "components/loading/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Loading should render correctly 1`] = `\n\"<div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #444;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div>\"\n`;\n\nexports[`Loading should render correctly 2`] = `[Function]`;\n\nexports[`Loading should work with custom styles 1`] = `\n\"<div><div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #fff;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div><div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 20%);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #444;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div><div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 10px);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #444;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div></div>\"\n`;\n\nexports[`Loading should work with custom styles 2`] = `[Function]`;\n\nexports[`Loading should work with different types 1`] = `\n\"<div><div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #0070f3;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div><div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #666;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div><div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #f5a623;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div><div class=\\\\\"loading-container\\\\\"><span class=\\\\\"loading\\\\\"><i></i><i></i><i></i></span><style>\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          min-height: 1em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: #666;\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: #e00;\n          margin: 0 calc(0.25em / 2 * 1);\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      </style></div></div>\"\n`;\n\nexports[`Loading should work with different types 2`] = `[Function]`;\n"
  },
  {
    "path": "components/loading/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Loading } from 'components'\n\ndescribe('Loading', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Loading />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).toMatchSnapshot()\n  })\n\n  it('should work with different types', () => {\n    const wrapper = mount(\n      <div>\n        <Loading type=\"success\" />\n        <Loading type=\"secondary\" />\n        <Loading type=\"warning\" />\n        <Loading type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).toMatchSnapshot()\n  })\n\n  it('should work with custom styles', () => {\n    const wrapper = mount(\n      <div>\n        <Loading color=\"#fff\" />\n        <Loading unit=\"20%\" />\n        <Loading unit=\"10px\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).toMatchSnapshot()\n  })\n\n  it('should work with children', () => {\n    const wrapper = mount(<Loading>test-children</Loading>)\n    expect(wrapper.find('.loading').text()).toContain('test-children')\n  })\n})\n"
  },
  {
    "path": "components/loading/index.ts",
    "content": "import Loading from './loading'\n\nexport type { LoadingProps, LoadingTypes } from './loading'\nexport default Loading\n"
  },
  {
    "path": "components/loading/loading.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { NormalTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type LoadingTypes = NormalTypes\ninterface Props {\n  type?: LoadingTypes\n  color?: string\n  className?: string\n  spaceRatio?: number\n}\n\nconst defaultProps = {\n  type: 'default' as LoadingTypes,\n  className: '',\n  spaceRatio: 1,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type LoadingProps = Props & NativeAttrs\n\nconst getIconBgColor = (\n  type: LoadingTypes,\n  palette: GeistUIThemesPalette,\n  color?: string,\n) => {\n  const colors: { [key in LoadingTypes]: string } = {\n    default: palette.accents_6,\n    secondary: palette.secondary,\n    success: palette.success,\n    warning: palette.warning,\n    error: palette.error,\n  }\n\n  return color ? color : colors[type]\n}\n\nconst LoadingComponent: React.FC<React.PropsWithChildren<LoadingProps>> = ({\n  children,\n  type,\n  color,\n  className,\n  spaceRatio,\n  ...props\n}: React.PropsWithChildren<LoadingProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const classes = useClasses('loading-container', className)\n  const bgColor = useMemo(\n    () => getIconBgColor(type, theme.palette, color),\n    [type, theme.palette, color],\n  )\n\n  return (\n    <div className={classes} {...props}>\n      <span className=\"loading\">\n        {children && <label>{children}</label>}\n        <i />\n        <i />\n        <i />\n      </span>\n      <style jsx>{`\n        .loading-container {\n          display: inline-flex;\n          align-items: center;\n          position: relative;\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, '100%')};\n          min-height: 1em;\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        label {\n          margin-right: 0.5em;\n          color: ${theme.palette.accents_5};\n          line-height: 1;\n        }\n\n        label :global(*) {\n          margin: 0;\n        }\n\n        .loading {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 100%;\n          height: 100%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background-color: transparent;\n          user-select: none;\n        }\n\n        i {\n          width: 0.25em;\n          height: 0.25em;\n          border-radius: 50%;\n          background-color: ${bgColor};\n          margin: 0 calc(0.25em / 2 * ${spaceRatio});\n          display: inline-block;\n          animation: loading-blink 1.4s infinite both;\n        }\n\n        i:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        i:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n\n        @keyframes loading-blink {\n          0% {\n            opacity: 0.2;\n          }\n\n          20% {\n            opacity: 1;\n          }\n\n          100% {\n            opacity: 0.2;\n          }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nLoadingComponent.defaultProps = defaultProps\nLoadingComponent.displayName = 'GeistLoading'\nconst Loading = withScale(LoadingComponent)\nexport default Loading\n"
  },
  {
    "path": "components/modal/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Modal customization should be supported 1`] = `\n\"<div class=\\\\\"wrapper test-class  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab\\\\\" aria-hidden=\\\\\"true\\\\\"></div><h2 class=\\\\\"\\\\\">Modal</h2><style>\n        h2 {\n          line-height: 1.6;\n          font-weight: normal;\n          text-align: center;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          align-items: center;\n          word-break: break-word;\n          text-transform: capitalize;\n          font-size: calc(1.5 * 16px);\n          color: #000;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(0px, -30px, 0px);\n            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,\n              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n            width: 100%;\n            font-size: calc(1 * 16px);\n            height: auto;\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(0px, -30px, 0px);\n          }\n\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .wrapper-leave-active {\n            opacity: 0;\n            transform: translate3d(0px, -30px, 0px);\n          }\n\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div>\"\n`;\n\nexports[`Modal should render correctly 1`] = `\n\"<div class=\\\\\"backdrop  backdrop-wrapper-enter\\\\\"><div class=\\\\\"layer\\\\\"></div><div class=\\\\\"position\\\\\"><div class=\\\\\"wrapper  wrapper-enter\\\\\" role=\\\\\"dialog\\\\\" tabindex=\\\\\"-1\\\\\"><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab\\\\\" aria-hidden=\\\\\"true\\\\\"></div><h2 class=\\\\\"\\\\\">Modal</h2><style>\n        h2 {\n          line-height: 1.6;\n          font-weight: normal;\n          text-align: center;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          align-items: center;\n          word-break: break-word;\n          text-transform: capitalize;\n          font-size: calc(1.5 * 16px);\n          color: #000;\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style><p class=\\\\\"\\\\\">This is a modal</p><style>\n        p {\n          font-weight: normal;\n          display: inline-block;\n          text-align: center;\n          word-break: break-word;\n          text-transform: uppercase;\n          color: #666;\n          font-size: calc(0.875 * 16px);\n          line-height: 1.5em;\n          width: auto;\n          height: 1.5em;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style><div class=\\\\\"content\\\\\"><p>Some content contained within the modal.</p></div><style>\n        .content {\n          position: relative;\n          text-align: left;\n          font-size: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(1.3125 * 16px) calc(1.3125 * 16px) calc(0.6625 * 16px)\n            calc(1.3125 * 16px);\n          margin: 0\n            calc(var(--modal-wrapper-padding-right) * -1)\n            0\n            calc(var(--modal-wrapper-padding-left) * -1);\n        }\n\n        .content > :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content > :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      </style><div></div><footer><button type=\\\\\"button\\\\\" class=\\\\\"btn mock\\\\\"><div class=\\\\\"text\\\\\">Cancel</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: calc(10.5 * 16px);\n            width: initial;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.375 * 16px) 0 calc(1.375 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button><button type=\\\\\"button\\\\\" class=\\\\\"btn mock\\\\\"><div class=\\\\\"text\\\\\">Submit</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(2.5 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: calc(0.875 * 16px);\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.727 * 16px);\n            --geist-ui-button-height: calc(2.5 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: calc(10.5 * 16px);\n            width: initial;\n            height: calc(2.5 * 16px);\n            padding: 0 calc(1.375 * 16px) 0 calc(1.375 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button></footer><style>\n        footer {\n          display: flex;\n          overflow: hidden;\n          width: 100%;\n          height: auto;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          border-top: 1px solid #eaeaea;\n          border-bottom-left-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        footer > :global(button.btn + button.btn) {\n          border-left: 1px solid #eaeaea;\n        }\n\n        div {\n          height: 0px;\n          flex-shrink: 0;\n        }\n      </style><div tabindex=\\\\\"0\\\\\" class=\\\\\"hide-tab\\\\\" aria-hidden=\\\\\"true\\\\\"></div><style>\n          .wrapper {\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            box-sizing: border-box;\n            background-color: #fff;\n            color: #000;\n            border-radius: 6px;\n            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);\n            opacity: 0;\n            outline: none;\n            transform: translate3d(0px, -30px, 0px);\n            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,\n              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n            width: 100%;\n            font-size: calc(1 * 16px);\n            height: auto;\n            --modal-wrapper-padding-left: calc(1.3125 * 16px);\n            --modal-wrapper-padding-right: calc(1.3125 * 16px);\n            padding: calc(1.3125 * 16px) var(--modal-wrapper-padding-right)\n              calc(1.3125 * 16px) var(--modal-wrapper-padding-left);\n            margin: 0 0 0 0;\n          }\n\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(0px, -30px, 0px);\n          }\n\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .wrapper-leave-active {\n            opacity: 0;\n            transform: translate3d(0px, -30px, 0px);\n          }\n\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        </style></div></div><style>\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: calc(26 * 16px);\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: 0.25;\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          </style></div>\"\n`;\n"
  },
  {
    "path": "components/modal/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Modal } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport {\n  expectModalIsClosed,\n  expectModalIsOpened,\n} from '../../use-modal/__tests__/use-modal.test'\nimport userEvent from '@testing-library/user-event'\n\ndescribe('Modal', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Modal visible={true}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>This is a modal</Modal.Subtitle>\n        <Modal.Content>\n          <p>Some content contained within the modal.</p>\n        </Modal.Content>\n        <Modal.Action passive>Cancel</Modal.Action>\n        <Modal.Action>Submit</Modal.Action>\n      </Modal>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should trigger event when modal changed', async () => {\n    const closeHandler = jest.fn()\n    const wrapper = mount(\n      <Modal onClose={closeHandler}>\n        <Modal.Title>Modal</Modal.Title>\n      </Modal>,\n    )\n    expectModalIsClosed(wrapper)\n\n    wrapper.setProps({ visible: true })\n    await updateWrapper(wrapper, 350)\n    expectModalIsOpened(wrapper)\n\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 500)\n    expectModalIsClosed(wrapper)\n    expect(closeHandler).toHaveBeenCalled()\n  })\n\n  it('should disable backdrop event', async () => {\n    const closeHandler = jest.fn()\n    const wrapper = mount(\n      <Modal visible={true} disableBackdropClick onClose={closeHandler}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Action>Submit</Modal.Action>\n      </Modal>,\n    )\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 500)\n    expectModalIsOpened(wrapper)\n    expect(closeHandler).not.toHaveBeenCalled()\n  })\n\n  it('should disable backdrop even if actions missing', async () => {\n    const closeHandler = jest.fn()\n    const wrapper = mount(\n      <Modal visible={true} disableBackdropClick onClose={closeHandler}>\n        <Modal.Title>Modal</Modal.Title>\n      </Modal>,\n    )\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 500)\n    expectModalIsOpened(wrapper)\n    expect(closeHandler).not.toHaveBeenCalled()\n  })\n\n  it('should ignore event when action disabled', () => {\n    const actions1 = jest.fn()\n    const actions2 = jest.fn()\n    const wrapper = mount(\n      <Modal visible={true}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Action passive onClick={actions1}>\n          Submit\n        </Modal.Action>\n        <Modal.Action disabled onClick={actions2}>\n          Submit\n        </Modal.Action>\n      </Modal>,\n    )\n    wrapper.find('button').at(0).simulate('click', nativeEvent)\n    wrapper.find('button').at(1).simulate('click', nativeEvent)\n\n    expect(actions1).toHaveBeenCalled()\n    expect(actions2).not.toHaveBeenCalled()\n  })\n\n  it('should be close modal through action event', async () => {\n    const closeHandler = jest.fn()\n    const wrapper = mount(\n      <Modal visible={true} onClose={closeHandler}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Action passive onClick={e => e.close()}>\n          Close\n        </Modal.Action>\n      </Modal>,\n    )\n    wrapper.find('button').at(0).simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 500)\n    expectModalIsClosed(wrapper)\n    expect(closeHandler).toHaveBeenCalled()\n  })\n\n  it('customization should be supported', () => {\n    const wrapper = mount(\n      <Modal visible={true} width=\"100px\" wrapClassName=\"test-class\">\n        <Modal.Title>Modal</Modal.Title>\n      </Modal>,\n    )\n    const html = wrapper.find('.wrapper').html()\n    expect(html).toMatchSnapshot()\n    expect(wrapper.find('.wrapper').at(0).getDOMNode()).toHaveClass('test-class')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('focus should only be switched within modal', async () => {\n    const wrapper = mount(\n      <Modal visible={true} width=\"100px\" wrapClassName=\"test-class\">\n        <button id=\"button\" />\n      </Modal>,\n    )\n    const tabStart = wrapper.find('.hide-tab').at(0).getDOMNode()\n    const tabEnd = wrapper.find('.hide-tab').at(1).getDOMNode()\n    const button = wrapper.find('#button').at(0).getDOMNode()\n    const focusTrap = wrapper.find('.wrapper').at(0).getDOMNode()\n\n    expect(tabStart).toHaveFocus()\n    userEvent.tab({ focusTrap })\n    expect(button).toHaveFocus()\n    userEvent.tab()\n    expect(tabEnd).toHaveFocus()\n    userEvent.tab()\n    expect(tabStart).toHaveFocus()\n\n    userEvent.tab({ shift: true, focusTrap })\n    expect(tabEnd).toHaveFocus()\n    userEvent.tab({ shift: true, focusTrap })\n    expect(button).toHaveFocus()\n    userEvent.tab({ shift: true, focusTrap })\n    expect(tabStart).toHaveFocus()\n  })\n\n  it('should close modal when keyboard event is triggered', async () => {\n    const wrapper = mount(\n      <Modal visible={true}>\n        <Modal.Title>Modal</Modal.Title>\n      </Modal>,\n    )\n    expectModalIsOpened(wrapper)\n    userEvent.keyboard('{esc}')\n    await updateWrapper(wrapper, 500)\n    expectModalIsClosed(wrapper)\n  })\n\n  it('should prevent close modal when keyboard is false', async () => {\n    const wrapper = mount(\n      <Modal visible={true} keyboard={false}>\n        <Modal.Title>Modal</Modal.Title>\n      </Modal>,\n    )\n    expectModalIsOpened(wrapper)\n    userEvent.keyboard('{esc}')\n    await updateWrapper(wrapper, 500)\n    expectModalIsOpened(wrapper)\n  })\n})\n"
  },
  {
    "path": "components/modal/index.ts",
    "content": "import Modal from './modal'\nimport ModalTitle from './modal-title'\nimport ModalSubtitle from './modal-subtitle'\nimport ModalContent from './modal-content'\nimport ModalAction from './modal-action'\n\nexport type ModalComponentType = typeof Modal & {\n  Title: typeof ModalTitle\n  Subtitle: typeof ModalSubtitle\n  Content: typeof ModalContent\n  Action: typeof ModalAction\n}\n;(Modal as ModalComponentType).Title = ModalTitle\n;(Modal as ModalComponentType).Subtitle = ModalSubtitle\n;(Modal as ModalComponentType).Content = ModalContent\n;(Modal as ModalComponentType).Action = ModalAction\n\nexport type { ModalProps } from './modal'\nexport type { ModalTitleProps } from './modal-title'\nexport type { ModalSubtitleProps } from './modal-subtitle'\nexport type { ModalActionProps } from './modal-action'\nexport type { ModalContentProps } from './modal-content'\nexport default Modal as ModalComponentType\n"
  },
  {
    "path": "components/modal/modal-action.tsx",
    "content": "import React, { MouseEvent, useImperativeHandle, useMemo, useRef } from 'react'\nimport css from 'styled-jsx/css'\nimport useTheme from '../use-theme'\nimport { useModalContext } from './modal-context'\nimport Button, { ButtonProps } from '../button/button'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ntype ModalActionEvent = MouseEvent<HTMLButtonElement> & {\n  close: () => void\n}\n\ninterface Props {\n  className?: string\n  passive?: boolean\n  disabled?: boolean\n  onClick?: (event: ModalActionEvent) => void\n}\n\nconst defaultProps = {\n  className: '',\n  passive: false,\n  disabled: false,\n}\n\nexport type ModalActionProps = Props & Omit<ButtonProps, keyof Props>\n\nconst ModalActionComponent = React.forwardRef<\n  HTMLButtonElement,\n  React.PropsWithChildren<ModalActionProps>\n>(\n  (\n    {\n      className,\n      children,\n      onClick,\n      passive,\n      disabled,\n      ...props\n    }: React.PropsWithChildren<ModalActionProps> & typeof defaultProps,\n    ref: React.Ref<HTMLButtonElement | null>,\n  ) => {\n    const theme = useTheme()\n    const { SCALES } = useScale()\n    const btnRef = useRef<HTMLButtonElement>(null)\n    const { close } = useModalContext()\n    useImperativeHandle(ref, () => btnRef.current)\n\n    const clickHandler = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled) return\n      const actionEvent = Object.assign({}, event, {\n        close: () => close && close(),\n      })\n      onClick && onClick(actionEvent)\n    }\n\n    const color = useMemo(() => {\n      return passive ? theme.palette.accents_5 : theme.palette.foreground\n    }, [theme.palette, passive, disabled])\n\n    const bgColor = useMemo(() => {\n      return disabled ? theme.palette.accents_1 : theme.palette.background\n    }, [theme.palette, disabled])\n\n    const { className: resolveClassName, styles } = css.resolve`\n      button.btn {\n        font-size: ${SCALES.font(0.75)};\n        border: none;\n        color: ${color};\n        background-color: ${theme.palette.background};\n        display: flex;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        flex: 1;\n        height: ${SCALES.height(3.5625)};\n        border-radius: 0;\n        min-width: 0;\n      }\n      button.btn:hover,\n      button.btn:focus {\n        color: ${disabled ? color : theme.palette.foreground};\n        background-color: ${disabled ? bgColor : theme.palette.accents_1};\n      }\n    `\n    const classes = useClasses(resolveClassName, className)\n\n    const overrideProps = {\n      ...props,\n      effect: false,\n      ref: btnRef,\n    }\n\n    return (\n      <Button\n        className={classes}\n        onClick={clickHandler}\n        disabled={disabled}\n        {...overrideProps}>\n        {children}\n        {styles}\n      </Button>\n    )\n  },\n)\n\nModalActionComponent.defaultProps = defaultProps\nModalActionComponent.displayName = 'GeistModalAction'\nconst ModalAction = withScale(ModalActionComponent)\nexport default ModalAction\n"
  },
  {
    "path": "components/modal/modal-actions.tsx",
    "content": "import React, { useEffect, useRef, useState } from 'react'\nimport useTheme from '../use-theme'\n\nconst ModalActionsComponent: React.FC<React.PropsWithChildren<unknown>> = ({\n  children,\n  ...props\n}) => {\n  const theme = useTheme()\n  const ref = useRef<HTMLDivElement>(null)\n  const [height, setHeight] = useState<number | string>('auto')\n\n  useEffect(() => {\n    if (!ref.current) return\n    setHeight(`${ref.current.clientHeight}px`)\n  }, [ref])\n\n  return (\n    <>\n      <div />\n      <footer ref={ref} {...props}>\n        {children}\n      </footer>\n      <style jsx>{`\n        footer {\n          display: flex;\n          overflow: hidden;\n          width: 100%;\n          height: auto;\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          border-top: 1px solid ${theme.palette.border};\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n        }\n\n        footer > :global(button.btn + button.btn) {\n          border-left: 1px solid ${theme.palette.border};\n        }\n\n        div {\n          height: ${height};\n          flex-shrink: 0;\n        }\n      `}</style>\n    </>\n  )\n}\n\nModalActionsComponent.displayName = 'GeistModalActions'\nconst ModalActions = React.memo(ModalActionsComponent)\nexport default ModalActions\n"
  },
  {
    "path": "components/modal/modal-content.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>\nexport type ModalContentProps = Props & NativeAttrs\n\nconst ModalContentComponent: React.FC<React.PropsWithChildren<ModalContentProps>> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<ModalContentProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n\n  return (\n    <>\n      <div className={useClasses('content', className)} {...props}>\n        {children}\n      </div>\n      <style jsx>{`\n        .content {\n          position: relative;\n          text-align: left;\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(1.3125)} ${SCALES.pr(1.3125)} ${SCALES.pb(0.6625)}\n            ${SCALES.pl(1.3125)};\n          margin: ${SCALES.mt(0)}\n            ${SCALES.mr(0, 'calc(var(--modal-wrapper-padding-right) * -1)')}\n            ${SCALES.mb(0)}\n            ${SCALES.ml(0, 'calc(var(--modal-wrapper-padding-left) * -1)')};\n        }\n\n        .content > :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .content > :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      `}</style>\n    </>\n  )\n}\n\nModalContentComponent.defaultProps = defaultProps\nModalContentComponent.displayName = 'GeistModalContent'\nconst ModalContent = withScale(ModalContentComponent)\nexport default ModalContent\n"
  },
  {
    "path": "components/modal/modal-context.ts",
    "content": "import React from 'react'\n\nexport interface ModalConfig {\n  close?: () => void\n}\n\nconst defaultContext = {}\n\nexport const ModalContext = React.createContext<ModalConfig>(defaultContext)\n\nexport const useModalContext = (): ModalConfig =>\n  React.useContext<ModalConfig>(ModalContext)\n"
  },
  {
    "path": "components/modal/modal-subtitle.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>\nexport type ModalSubtitleProps = Props & NativeAttrs\n\nconst ModalSubtitleComponent: React.FC<React.PropsWithChildren<ModalSubtitleProps>> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<ModalSubtitleProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n\n  return (\n    <>\n      <p className={className} {...props}>\n        {children}\n      </p>\n      <style jsx>{`\n        p {\n          font-weight: normal;\n          display: inline-block;\n          text-align: center;\n          word-break: break-word;\n          text-transform: uppercase;\n          color: ${theme.palette.accents_5};\n          font-size: ${SCALES.font(0.875)};\n          line-height: 1.5em;\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, '1.5em')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </>\n  )\n}\n\nModalSubtitleComponent.defaultProps = defaultProps\nModalSubtitleComponent.displayName = 'GeistModalSubtitle'\nconst ModalSubtitle = withScale(ModalSubtitleComponent)\nexport default ModalSubtitle\n"
  },
  {
    "path": "components/modal/modal-title.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type ModalTitleProps = Props & NativeAttrs\n\nconst ModalTitleComponent: React.FC<React.PropsWithChildren<ModalTitleProps>> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<ModalTitleProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n\n  return (\n    <>\n      <h2 className={className} {...props}>\n        {children}\n      </h2>\n      <style jsx>{`\n        h2 {\n          line-height: 1.6;\n          font-weight: normal;\n          text-align: center;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          align-items: center;\n          word-break: break-word;\n          text-transform: capitalize;\n          font-size: ${SCALES.font(1.5)};\n          color: ${theme.palette.foreground};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </>\n  )\n}\n\nModalTitleComponent.defaultProps = defaultProps\nModalTitleComponent.displayName = 'GeistModalTitle'\nconst ModalTitle = withScale(ModalTitleComponent)\nexport default ModalTitle\n"
  },
  {
    "path": "components/modal/modal-wrapper.tsx",
    "content": "import React, { useEffect, useRef } from 'react'\nimport useTheme from '../use-theme'\nimport CssTransition from '../shared/css-transition'\nimport { isChildElement } from '../utils/collections'\nimport useScale from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n  visible?: boolean\n}\n\nconst defaultProps = {\n  className: '',\n  visible: false,\n}\n\nexport type ModalWrapperProps = Props\n\nconst ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({\n  className,\n  children,\n  visible,\n  ...props\n}: React.PropsWithChildren<ModalWrapperProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const modalContent = useRef<HTMLDivElement>(null)\n  const tabStart = useRef<HTMLDivElement>(null)\n  const tabEnd = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (!visible) return\n    const activeElement = document.activeElement\n    const isChild = isChildElement(modalContent.current, activeElement)\n    if (isChild) return\n    tabStart.current && tabStart.current.focus()\n  }, [visible])\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const isTabDown = event.keyCode === 9\n    if (!visible || !isTabDown) return\n    const activeElement = document.activeElement\n    if (event.shiftKey) {\n      if (activeElement === tabStart.current) {\n        tabEnd.current && tabEnd.current.focus()\n      }\n    } else {\n      if (activeElement === tabEnd.current) {\n        tabStart.current && tabStart.current.focus()\n      }\n    }\n  }\n\n  return (\n    <CssTransition name=\"wrapper\" visible={visible} clearTime={300}>\n      <div\n        className={useClasses('wrapper', className)}\n        role=\"dialog\"\n        tabIndex={-1}\n        onKeyDown={onKeyDown}\n        ref={modalContent}\n        {...props}>\n        <div tabIndex={0} className=\"hide-tab\" aria-hidden=\"true\" ref={tabStart} />\n        {children}\n        <div tabIndex={0} className=\"hide-tab\" aria-hidden=\"true\" ref={tabEnd} />\n        <style jsx>{`\n          .wrapper {\n            max-width: 100%;\n            vertical-align: middle;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            box-sizing: border-box;\n            background-color: ${theme.palette.background};\n            color: ${theme.palette.foreground};\n            border-radius: ${theme.layout.radius};\n            box-shadow: ${theme.expressiveness.shadowLarge};\n            opacity: 0;\n            outline: none;\n            transform: translate3d(0px, -30px, 0px);\n            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,\n              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n            width: 100%;\n            font-size: ${SCALES.font(1)};\n            height: ${SCALES.height(1, 'auto')};\n            --modal-wrapper-padding-left: ${SCALES.pl(1.3125)};\n            --modal-wrapper-padding-right: ${SCALES.pr(1.3125)};\n            padding: ${SCALES.pt(1.3125)} var(--modal-wrapper-padding-right)\n              ${SCALES.pb(1.3125)} var(--modal-wrapper-padding-left);\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n\n          .wrapper-enter {\n            opacity: 0;\n            transform: translate3d(0px, -30px, 0px);\n          }\n\n          .wrapper-enter-active {\n            opacity: 1;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .wrapper-leave {\n            opacity: 1;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .wrapper-leave-active {\n            opacity: 0;\n            transform: translate3d(0px, -30px, 0px);\n          }\n\n          .hide-tab {\n            outline: none;\n            overflow: hidden;\n            width: 0;\n            height: 0;\n            opacity: 0;\n          }\n        `}</style>\n      </div>\n    </CssTransition>\n  )\n}\n\nModalWrapper.defaultProps = defaultProps\nModalWrapper.displayName = 'GeistModalWrapper'\nexport default ModalWrapper\n"
  },
  {
    "path": "components/modal/modal.tsx",
    "content": "import React, { MouseEvent, useEffect, useMemo, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport usePortal from '../utils/use-portal'\nimport ModalWrapper from './modal-wrapper'\nimport ModalAction from './modal-action'\nimport ModalActions from './modal-actions'\nimport Backdrop from '../shared/backdrop'\nimport { ModalConfig, ModalContext } from './modal-context'\nimport { pickChild } from '../utils/collections'\nimport useBodyScroll from '../utils/use-body-scroll'\nimport useScale, { withScale } from '../use-scale'\nimport useKeyboard, { KeyCode } from '../use-keyboard'\n\ninterface Props {\n  disableBackdropClick?: boolean\n  onClose?: () => void\n  onContentClick?: (event: MouseEvent<HTMLElement>) => void\n  visible?: boolean\n  keyboard?: boolean\n  wrapClassName?: string\n  positionClassName?: string\n  backdropClassName?: string\n  layerClassName?: string\n}\n\nconst defaultProps = {\n  wrapClassName: '',\n  keyboard: true,\n  disableBackdropClick: false,\n  positionClassName: '',\n  backdropClassName: '',\n  layerClassName: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type ModalProps = Props & NativeAttrs\n\nconst ModalComponent: React.FC<React.PropsWithChildren<ModalProps>> = ({\n  visible: customVisible,\n  onClose,\n  children,\n  keyboard,\n  wrapClassName,\n  onContentClick,\n  disableBackdropClick,\n  positionClassName,\n  backdropClassName,\n  layerClassName,\n}: React.PropsWithChildren<ModalProps> & typeof defaultProps) => {\n  const portal = usePortal('modal')\n  const { SCALES } = useScale()\n  const [, setBodyHidden] = useBodyScroll(null, { delayReset: 300 })\n  const [visible, setVisible] = useState<boolean>(false)\n  const [withoutActionsChildren, ActionsChildren] = pickChild(children, ModalAction)\n  const hasActions = ActionsChildren && React.Children.count(ActionsChildren) > 0\n  const closeModal = () => {\n    onClose && onClose()\n    setVisible(false)\n    setBodyHidden(false)\n  }\n\n  useEffect(() => {\n    if (typeof customVisible === 'undefined') return\n    setVisible(customVisible)\n    setBodyHidden(customVisible)\n  }, [customVisible])\n\n  const { bindings } = useKeyboard(\n    () => {\n      keyboard && closeModal()\n    },\n    KeyCode.Escape,\n    {\n      disableGlobalEvent: true,\n    },\n  )\n\n  const closeFromBackdrop = () => {\n    if (disableBackdropClick) return\n    closeModal()\n  }\n\n  const modalConfig: ModalConfig = useMemo(\n    () => ({\n      close: closeModal,\n    }),\n    [],\n  )\n\n  if (!portal) return null\n  return createPortal(\n    <ModalContext.Provider value={modalConfig}>\n      <Backdrop\n        onClick={closeFromBackdrop}\n        onContentClick={onContentClick}\n        visible={visible}\n        width={SCALES.width(26)}\n        positionClassName={positionClassName}\n        backdropClassName={backdropClassName}\n        layerClassName={layerClassName}\n        {...bindings}>\n        <ModalWrapper visible={visible} className={wrapClassName}>\n          {withoutActionsChildren}\n          {hasActions && <ModalActions>{ActionsChildren}</ModalActions>}\n        </ModalWrapper>\n      </Backdrop>\n    </ModalContext.Provider>,\n    portal,\n  )\n}\n\nModalComponent.defaultProps = defaultProps\nModalComponent.displayName = 'GeistModal'\nconst Modal = withScale(ModalComponent)\nexport default Modal\n"
  },
  {
    "path": "components/note/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Note should render correctly 1`] = `\n\"<div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>note<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #eaeaea;\n          color: #000;\n          background-color: #fff;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div>\"\n`;\n\nexports[`Note should work with different styles 1`] = `\n\"<div><div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>secondary<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #666;\n          color: #666;\n          background-color: #fff;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div><div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>success<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #0070f3;\n          color: white;\n          background-color: #0070f3;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div><div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>warning<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #000;\n          color: #fff;\n          background-color: #000;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div></div>\"\n`;\n\nexports[`Note should work with different types 1`] = `\n\"<div><div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>secondary<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #666;\n          color: #666;\n          background-color: #fff;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div><div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>success<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #0070f3;\n          color: #0070f3;\n          background-color: #fff;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div><div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>warning<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #f5a623;\n          color: #f5a623;\n          background-color: #fff;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div><div class=\\\\\"note\\\\\"><span class=\\\\\"label\\\\\"><b>note:</b></span>error<style>\n        .note {\n          line-height: 1.8;\n          border: 1px solid #e00;\n          color: #e00;\n          background-color: #fff;\n          border-radius: 6px;\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(1.32 * 16px) calc(0.667 * 16px)\n            calc(1.32 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/note/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Note } from 'components'\nimport { updateWrapper } from 'tests/utils'\n\ndescribe('Note', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Note>note</Note>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different types', () => {\n    const wrapper = mount(\n      <div>\n        <Note type=\"secondary\">secondary</Note>\n        <Note type=\"success\">success</Note>\n        <Note type=\"warning\">warning</Note>\n        <Note type=\"error\">error</Note>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('custom labels should be rendered', async () => {\n    const wrapper = mount(<Note label={false}>note</Note>)\n    expect(wrapper.find('.label').length).toBe(0)\n\n    wrapper.setProps({ label: 'test' })\n    await updateWrapper(wrapper)\n    expect(wrapper.find('.label').text().toLowerCase()).toContain('test')\n  })\n\n  it('should work with different styles', () => {\n    const wrapper = mount(\n      <div>\n        <Note type=\"secondary\">secondary</Note>\n        <Note type=\"success\" filled>\n          success\n        </Note>\n        <Note filled>warning</Note>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/note/index.ts",
    "content": "import Note from './note'\n\nexport type { NoteProps, NoteTypes } from './note'\nexport default Note\n"
  },
  {
    "path": "components/note/note.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { NormalTypes } from '../utils/prop-types'\nimport { GeistUIThemes } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type NoteTypes = NormalTypes\ninterface Props {\n  type?: NoteTypes\n  label?: string | boolean\n  filled?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  type: 'default' as NoteTypes,\n  label: 'note' as string | boolean,\n  filled: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type NoteProps = Props & NativeAttrs\n\nconst getStatusColor = (type: NoteTypes, filled: boolean, theme: GeistUIThemes) => {\n  const colors: { [key in NoteTypes]?: string } = {\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    error: theme.palette.error,\n  }\n  const statusColor = colors[type]\n\n  if (!filled)\n    return {\n      color: statusColor || theme.palette.foreground,\n      borderColor: statusColor || theme.palette.border,\n      bgColor: theme.palette.background,\n    }\n  const filledColor = statusColor ? 'white' : theme.palette.background\n  return {\n    color: filledColor,\n    borderColor: statusColor || theme.palette.foreground,\n    bgColor: statusColor || theme.palette.foreground,\n  }\n}\n\nexport const NoteComponent: React.FC<React.PropsWithChildren<NoteProps>> = ({\n  children,\n  type,\n  label,\n  filled,\n  className,\n  ...props\n}: React.PropsWithChildren<NoteProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { color, borderColor, bgColor } = useMemo(\n    () => getStatusColor(type, filled, theme),\n    [type, filled, theme],\n  )\n\n  return (\n    <div className={useClasses('note', className)} {...props}>\n      {label && (\n        <span className=\"label\">\n          <b>{label}:</b>\n        </span>\n      )}\n      {children}\n\n      <style jsx>{`\n        .note {\n          line-height: 1.8;\n          border: 1px solid ${borderColor};\n          color: ${color};\n          background-color: ${bgColor};\n          border-radius: ${theme.layout.radius};\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0.667)} ${SCALES.pr(1.32)} ${SCALES.pb(0.667)}\n            ${SCALES.pl(1.32)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .note :global(p) {\n          margin: 0;\n        }\n\n        .label {\n          text-transform: uppercase;\n          user-select: none;\n          line-height: 1.5;\n          padding-right: 0.38em;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nNoteComponent.defaultProps = defaultProps\nNoteComponent.displayName = 'GeistNote'\nconst Note = withScale(NoteComponent)\nexport default Note\n"
  },
  {
    "path": "components/page/__tests__/__snapshots__/child.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`PageChild should work with child component 1`] = `\n\"<section>outside string<header class=\\\\\"\\\\\">header<style>\n        header {\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .center {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n      </style></header><main class=\\\\\"\\\\\">content<style>\n        main {\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          padding: calc(3.125 * 16px) 0 calc(3.125 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n      </style></main><footer class=\\\\\"\\\\\">Footer<style>\n        footer {\n          position: absolute;\n          bottom: 0;\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></footer>outside string<style>\n        section {\n          max-width: 100vw;\n          min-height: 100vh;\n          box-sizing: border-box;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: calc(100% - 100pt);\n          height: auto;\n          padding: 0 calc(1.34 * 16px) 0 calc(1.34 * 16px);\n          margin: 0 auto 0\n            auto;\n        }\n      </style></section>\"\n`;\n"
  },
  {
    "path": "components/page/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Page should render correctly 1`] = `\n\"<section><main class=\\\\\"\\\\\">test-value<style>\n        main {\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          padding: calc(3.125 * 16px) 0 calc(3.125 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n      </style></main><style>\n        section {\n          max-width: 100vw;\n          min-height: 100vh;\n          box-sizing: border-box;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: calc(100% - 100pt);\n          height: auto;\n          padding: 0 calc(1.34 * 16px) 0 calc(1.34 * 16px);\n          margin: 0 auto 0\n            auto;\n        }\n      </style></section>\"\n`;\n\nexports[`Page should work correctly with dot configs 1`] = `\n\"<section><main class=\\\\\"\\\\\"><style>\n        main {\n          font-size: calc(1 * 16px);\n          width: 100%;\n          height: 100%;\n          padding: calc(3.125 * 16px) 0 calc(3.125 * 16px) 0;\n          margin: 0 0 0 0;\n        }\n      </style></main><span><style>\n        :global(body) {\n          background-image: radial-gradient(#e3e3e3 20px, transparent 0),\n            radial-gradient(#e3e3e3 20px, transparent 0);\n          background-position: 0 0, calc(0.5 * 25px) calc(0.5 * 25px);\n          background-attachment: fixed;\n          background-size: calc(0.5 * 50px) calc(0.5 * 50px);\n        }\n      </style></span><style>\n        section {\n          max-width: 100vw;\n          min-height: 100vh;\n          box-sizing: border-box;\n          position: relative;\n          font-size: calc(1 * 16px);\n          width: calc(100% - 100pt);\n          height: auto;\n          padding: 0 calc(1.34 * 16px) 0 calc(1.34 * 16px);\n          margin: 0 auto 0\n            auto;\n        }\n      </style></section>\"\n`;\n"
  },
  {
    "path": "components/page/__tests__/child.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Page } from 'components'\n\ndescribe('PageChild', () => {\n  it('the component Page.Content should be injected automatically', () => {\n    const wrapper = mount(<Page>test-value</Page>)\n    const content = mount(\n      <Page>\n        <Page.Content>test-value</Page.Content>\n      </Page>,\n    )\n    expect(wrapper.html()).toEqual(content.html())\n  })\n\n  it('should work with child component', () => {\n    const wrapper = mount(\n      <Page>\n        outside string\n        <Page.Header>header</Page.Header>\n        <Page.Content>content</Page.Content>\n        <Page.Footer>Footer</Page.Footer>\n        outside string\n      </Page>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the header should be centered', () => {\n    const wrapper = mount(<Page.Header center>header</Page.Header>)\n    expect(wrapper.find('.center').length).not.toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/page/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport ReactDom from 'react-dom/server'\nimport { mount } from 'enzyme'\nimport { Page, GeistProvider } from 'components'\n\ndescribe('Page', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Page>test-value</Page>)\n    expect(wrapper.text()).toContain('test-value')\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the first page should not contain content', () => {\n    const html = ReactDom.renderToString(<Page render=\"effect\">test-value</Page>)\n    expect(html).not.toContain('test-value')\n\n    const wrapper = mount(<Page render=\"effect\">test-value</Page>)\n    expect(wrapper.html()).toContain('test-value')\n  })\n\n  it('the first page should contain seo string', () => {\n    const html = ReactDom.renderToString(<Page render=\"effect-seo\">test-value</Page>)\n    expect(html).toContain('test-value')\n    expect(html).toContain('hidden')\n\n    const wrapper = mount(<Page render=\"effect\">test-value</Page>)\n    expect(wrapper.html()).toContain('test-value')\n  })\n\n  it('the global styles should be added to body element', () => {\n    const wrapper = mount(<Page dotBackdrop />)\n    expect(wrapper.html()).toContain('global(body)')\n  })\n\n  it('should disable dot style when in dark mode', () => {\n    const wrapper = mount(\n      <GeistProvider themeType=\"dark\">\n        <Page dotBackdrop />\n      </GeistProvider>,\n    )\n    expect(wrapper.html()).not.toContain('global(body)')\n  })\n\n  it('should work correctly with dot configs', () => {\n    const wrapper = mount(<Page dotBackdrop dotSize=\"20px\" dotSpace={0.5} />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/page/index.ts",
    "content": "import Page from './page'\nimport PageHeader from './page-header'\nimport PageContent from './page-content'\nimport PageFooter from './page-footer'\n\nexport type PageComponentType = typeof Page & {\n  Header: typeof PageHeader\n  Content: typeof PageContent\n  Body: typeof PageContent\n  Footer: typeof PageFooter\n}\n;(Page as PageComponentType).Header = PageHeader\n;(Page as PageComponentType).Content = PageContent\n;(Page as PageComponentType).Body = PageContent\n;(Page as PageComponentType).Footer = PageFooter\n\nexport type { PageProps, PageRenderMode } from './page'\nexport type { PageHeaderProps } from './page-header'\nexport type { PageContentProps } from './page-content'\nexport type { PageFooterProps } from './page-footer'\nexport default Page as PageComponentType\n"
  },
  {
    "path": "components/page/page-content.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type PageContentProps = Props & NativeAttrs\n\nconst PageContentComponent: React.FC<React.PropsWithChildren<PageContentProps>> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<PageContentProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n\n  return (\n    <main className={className} {...props}>\n      {children}\n      <style jsx>{`\n        main {\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, '100%')};\n          padding: ${SCALES.pt(3.125)} ${SCALES.pr(0)} ${SCALES.pb(3.125)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </main>\n  )\n}\n\nPageContentComponent.defaultProps = defaultProps\nPageContentComponent.displayName = 'GeistPageContent'\nconst PageContent = withScale(PageContentComponent)\nexport default PageContent\n"
  },
  {
    "path": "components/page/page-footer.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type PageFooterProps = Props & NativeAttrs\n\nconst PageFooterComponent: React.FC<React.PropsWithChildren<PageFooterProps>> = ({\n  children,\n  ...props\n}: React.PropsWithChildren<PageFooterProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n\n  return (\n    <footer {...props}>\n      {children}\n      <style jsx>{`\n        footer {\n          position: absolute;\n          bottom: 0;\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </footer>\n  )\n}\n\nPageFooterComponent.defaultProps = defaultProps\nPageFooterComponent.displayName = 'GeistPageFooter'\nconst PageFooter = withScale(PageFooterComponent)\nexport default PageFooter\n"
  },
  {
    "path": "components/page/page-header.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  center?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  center: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type PageHeaderProps = Props & NativeAttrs\n\nconst PageHeaderComponent: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({\n  children,\n  center,\n  className,\n  ...props\n}: React.PropsWithChildren<PageHeaderProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const classes = useClasses({ center }, className)\n\n  return (\n    <header className={classes} {...props}>\n      {children}\n      <style jsx>{`\n        header {\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .center {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n      `}</style>\n    </header>\n  )\n}\n\nPageHeaderComponent.defaultProps = defaultProps\nPageHeaderComponent.displayName = 'GeistPageHeader'\nconst PageHeader = withScale(PageHeaderComponent)\nexport default PageHeader\n"
  },
  {
    "path": "components/page/page.tsx",
    "content": "import React, { CSSProperties, useEffect, useMemo, useState } from 'react'\nimport { tuple } from '../utils/prop-types'\nimport useTheme from '../use-theme'\nimport PageContent from './page-content'\nimport { hasChild } from '../utils/collections'\nimport useScale, { withScale } from '../use-scale'\n\nconst renderMode = tuple('default', 'effect', 'effect-seo')\n\nexport type PageRenderMode = typeof renderMode[number]\n\ninterface Props {\n  render?: PageRenderMode\n  dotBackdrop?: boolean\n  dotSize?: CSSProperties['fontSize']\n  dotSpace?: number\n}\n\nconst defaultProps = {\n  render: 'default' as PageRenderMode,\n  dotBackdrop: false,\n  dotSize: '1px' as CSSProperties['fontSize'],\n  dotSpace: 1,\n}\n\nexport type DotStylesProps = {\n  dotSize: CSSProperties['fontSize']\n  dotSpace: number\n}\n\nconst DotStyles: React.FC<DotStylesProps> = ({ dotSpace, dotSize }) => {\n  const background = useMemo(\n    () => ({\n      position: `calc(${dotSpace} * 25px)`,\n      size: `calc(${dotSpace} * 50px)`,\n    }),\n    [dotSpace],\n  )\n  return (\n    <span>\n      <style jsx>{`\n        :global(body) {\n          background-image: radial-gradient(#e3e3e3 ${dotSize}, transparent 0),\n            radial-gradient(#e3e3e3 ${dotSize}, transparent 0);\n          background-position: 0 0, ${background.position} ${background.position};\n          background-attachment: fixed;\n          background-size: ${background.size} ${background.size};\n        }\n      `}</style>\n    </span>\n  )\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type PageProps = Props & NativeAttrs\n\nconst PageComponent: React.FC<React.PropsWithChildren<PageProps>> = ({\n  children,\n  render,\n  dotBackdrop,\n  className,\n  dotSize,\n  dotSpace,\n  ...props\n}: React.PropsWithChildren<PageProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const showDot = useMemo<boolean>(() => {\n    if (theme.type === 'dark') return false\n    return dotBackdrop\n  }, [dotBackdrop, theme.type])\n  const [preventRender, setPreventRender] = useState<boolean>(render !== 'default')\n\n  useEffect(() => {\n    setPreventRender(false)\n  }, [])\n\n  if (preventRender) {\n    const renderSEO = render === 'effect-seo'\n    if (!renderSEO) return null\n    return (\n      <div className=\"hidden\" aria-hidden=\"true\">\n        {children}\n        <style jsx>{`\n          .hidden {\n            opacity: 0;\n            display: none;\n          }\n        `}</style>\n      </div>\n    )\n  }\n\n  const hasContent = hasChild(children, PageContent)\n\n  return (\n    <section className={className} {...props}>\n      {hasContent ? children : <PageContent>{children}</PageContent>}\n      {showDot && <DotStyles dotSize={dotSize} dotSpace={dotSpace} />}\n      <style jsx>{`\n        section {\n          max-width: 100vw;\n          min-height: 100vh;\n          box-sizing: border-box;\n          position: relative;\n          font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'calc(100% - 100pt)')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(1.34)} ${SCALES.pb(0)} ${SCALES.pl(1.34)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0, 'auto')} ${SCALES.mb(0)}\n            ${SCALES.ml(0, 'auto')};\n        }\n      `}</style>\n    </section>\n  )\n}\n\nPageComponent.defaultProps = defaultProps\nPageComponent.displayName = 'GeistPage'\nconst Page = withScale(PageComponent)\nexport default Page\n"
  },
  {
    "path": "components/pagination/__tests__/__snapshots__/pagination.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Pagination should render correctly 1`] = `\n\"<nav class=\\\\\"\\\\\"><li><button class=\\\\\"disabled\\\\\">prev</button><style>\n        li {\n          margin-right: 0.428em;\n          display: inline-block;\n        }\n        button {\n          border: none;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          box-sizing: border-box;\n          text-transform: capitalize;\n          user-select: none;\n          white-space: nowrap;\n          text-align: center;\n          vertical-align: middle;\n          box-shadow: none;\n          outline: none;\n          height: var(--pagination-size);\n          min-width: var(--pagination-size);\n          font-size: inherit;\n          cursor: pointer;\n          color: #0070f3;\n          border-radius: 6px;\n          background-color: #fff;\n          transition: all linear 200ms 0ms;\n        }\n\n        button:hover {\n          background-color: rgba(0, 112, 243, 0.1);\n        }\n\n        .active {\n          font-weight: bold;\n          background-color: #0070f3;\n          color: #fff;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .active:hover {\n          background-color: rgba(0, 112, 243, 0.8);\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .disabled {\n          color: #888;\n          cursor: not-allowed;\n        }\n\n        .disabled:hover {\n          background-color: #eaeaea;\n        }\n\n        button :global(svg) {\n          width: 1.3em;\n          height: 1.3em;\n        }\n      </style></li><li><button class=\\\\\"active\\\\\">1</button><style>\n        li {\n          margin-right: 0.428em;\n          display: inline-block;\n        }\n        button {\n          border: none;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          box-sizing: border-box;\n          text-transform: capitalize;\n          user-select: none;\n          white-space: nowrap;\n          text-align: center;\n          vertical-align: middle;\n          box-shadow: none;\n          outline: none;\n          height: var(--pagination-size);\n          min-width: var(--pagination-size);\n          font-size: inherit;\n          cursor: pointer;\n          color: #0070f3;\n          border-radius: 6px;\n          background-color: #fff;\n          transition: all linear 200ms 0ms;\n        }\n\n        button:hover {\n          background-color: rgba(0, 112, 243, 0.1);\n        }\n\n        .active {\n          font-weight: bold;\n          background-color: #0070f3;\n          color: #fff;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .active:hover {\n          background-color: rgba(0, 112, 243, 0.8);\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .disabled {\n          color: #888;\n          cursor: not-allowed;\n        }\n\n        .disabled:hover {\n          background-color: #eaeaea;\n        }\n\n        button :global(svg) {\n          width: 1.3em;\n          height: 1.3em;\n        }\n      </style></li><li><button class=\\\\\"disabled\\\\\">next</button><style>\n        li {\n          margin-right: 0.428em;\n          display: inline-block;\n        }\n        button {\n          border: none;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          box-sizing: border-box;\n          text-transform: capitalize;\n          user-select: none;\n          white-space: nowrap;\n          text-align: center;\n          vertical-align: middle;\n          box-shadow: none;\n          outline: none;\n          height: var(--pagination-size);\n          min-width: var(--pagination-size);\n          font-size: inherit;\n          cursor: pointer;\n          color: #0070f3;\n          border-radius: 6px;\n          background-color: #fff;\n          transition: all linear 200ms 0ms;\n        }\n\n        button:hover {\n          background-color: rgba(0, 112, 243, 0.1);\n        }\n\n        .active {\n          font-weight: bold;\n          background-color: #0070f3;\n          color: #fff;\n          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n        }\n\n        .active:hover {\n          background-color: rgba(0, 112, 243, 0.8);\n          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n        }\n\n        .disabled {\n          color: #888;\n          cursor: not-allowed;\n        }\n\n        .disabled:hover {\n          background-color: #eaeaea;\n        }\n\n        button :global(svg) {\n          width: 1.3em;\n          height: 1.3em;\n        }\n      </style></li></nav><style>\n        nav {\n          font-variant: tabular-nums;\n          font-feature-settings: 'tnum';\n          --pagination-size: calc(2 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        nav :global(button:last-of-type) {\n          margin-right: 0;\n        }\n      </style>\"\n`;\n"
  },
  {
    "path": "components/pagination/__tests__/pagination.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Pagination } from 'components'\nimport { act } from 'react-dom/test-utils'\nimport { updateWrapper } from 'tests/utils'\n\ndescribe('Pagination', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Pagination />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the specified page should be activated', async () => {\n    const wrapper = mount(<Pagination count={10} initialPage={2} />)\n    expect(wrapper.find('.active').text()).toEqual('2')\n    await act(async () => {\n      wrapper.setProps({ page: 10 })\n    })\n    await updateWrapper(wrapper, 200)\n    expect(wrapper.find('.active').text()).toEqual('10')\n  })\n\n  it('should trigger change event', async () => {\n    let current = 1\n    const handler = jest.fn().mockImplementation(val => (current = val))\n    const wrapper = mount(<Pagination count={10} initialPage={2} onChange={handler} />)\n\n    await act(async () => {\n      wrapper.setProps({ page: 10 })\n    })\n    await updateWrapper(wrapper, 200)\n    expect(handler).toHaveBeenCalled()\n    expect(current).toEqual(10)\n\n    const btns = wrapper.find('button')\n    btns.at(0).simulate('click')\n    await updateWrapper(wrapper, 200)\n    expect(current).toEqual(9)\n\n    btns.at(btns.length - 1).simulate('click')\n    btns.at(btns.length - 1).simulate('click')\n    btns.at(btns.length - 1).simulate('click')\n    btns.at(btns.length - 1).simulate('click')\n    await updateWrapper(wrapper, 200)\n    expect(current).toEqual(10)\n    handler.mockRestore()\n  })\n\n  it('the page should be rendered to follow the specified limit', async () => {\n    const wrapper = mount(<Pagination count={20} limit={20} />)\n    expect(wrapper.find('button').length).toBeGreaterThanOrEqual(20)\n    await act(async () => {\n      wrapper.setProps({ limit: 5 })\n    })\n    await updateWrapper(wrapper, 200)\n    expect(wrapper.find('button').length).toBeLessThanOrEqual(10)\n  })\n\n  it('should be render all pages when limit is greater than the total', async () => {\n    const handler = jest.fn()\n    const wrapper = mount(<Pagination count={15} limit={40} onChange={handler} />)\n    expect(wrapper.find('button').length).toBeGreaterThanOrEqual(15)\n    wrapper.find('button').at(10).simulate('click')\n    await updateWrapper(wrapper, 200)\n\n    expect(handler).toHaveBeenCalled()\n    handler.mockRestore()\n  })\n\n  it('omit pages by limit value', async () => {\n    const wrapper = mount(<Pagination count={20} limit={5} />)\n    const btn4 = wrapper.find('button').at(4)\n    expect(btn4.text()).toEqual('4')\n    btn4.simulate('click')\n    await updateWrapper(wrapper, 200)\n    let btns = wrapper.find('button').map(btn => btn.text())\n    expect(btns.includes('2')).not.toBeTruthy()\n    expect(btns.includes('1')).toBeTruthy()\n    expect(btns.includes('3')).toBeTruthy()\n    expect(btns.includes('4')).toBeTruthy()\n    expect(btns.includes('5')).toBeTruthy()\n    expect(btns.includes('6')).not.toBeTruthy()\n    expect(btns.includes('20')).toBeTruthy()\n\n    const btn5 = wrapper.find('button').at(5)\n    expect(btn5.text()).toEqual('5')\n    btn5.simulate('click')\n    await updateWrapper(wrapper, 200)\n    btns = wrapper.find('button').map(btn => btn.text())\n    expect(btns.includes('1')).toBeTruthy()\n    expect(btns.includes('2')).not.toBeTruthy()\n    expect(btns.includes('3')).not.toBeTruthy()\n    expect(btns.includes('4')).toBeTruthy()\n    expect(btns.includes('5')).toBeTruthy()\n    expect(btns.includes('6')).toBeTruthy()\n    expect(btns.includes('7')).not.toBeTruthy()\n    expect(btns.includes('8')).not.toBeTruthy()\n    expect(btns.includes('20')).toBeTruthy()\n  })\n\n  it('should trigger change event when ellipsis clicked', async () => {\n    let current = 20\n    const handler = jest.fn().mockImplementation(val => (current = val))\n    const wrapper = mount(<Pagination count={20} initialPage={20} onChange={handler} />)\n    const btn = wrapper.find('svg').at(0).parents('button')\n    btn.at(0).simulate('click')\n    await updateWrapper(wrapper, 200)\n    expect(handler).toHaveBeenCalled()\n    expect(current).toEqual(15)\n\n    await act(async () => {\n      wrapper.setProps({ page: 1 })\n    })\n    await updateWrapper(wrapper, 200)\n    const lastBtn = wrapper.find('svg').at(0).parents('button')\n    lastBtn.at(0).simulate('click')\n    await updateWrapper(wrapper, 200)\n    expect(current).toEqual(1 + 5)\n  })\n\n  it('another SVG should be displayed when the mouse is moved in', async () => {\n    const wrapper = mount(<Pagination count={20} initialPage={20} />)\n    const svg = wrapper.find('svg').at(0)\n    const btn = svg.parents('button')\n\n    const html = svg.html()\n    btn.simulate('mouseEnter')\n    await updateWrapper(wrapper)\n    expect(html).not.toEqual(wrapper.find('svg').at(0).html())\n\n    btn.simulate('mouseLeave')\n    await updateWrapper(wrapper)\n    expect(html).toEqual(wrapper.find('svg').at(0).html())\n  })\n\n  it('custom buttons should be display', () => {\n    const wrapper = mount(\n      <Pagination count={20}>\n        <Pagination.Previous>custom-prev</Pagination.Previous>\n        <Pagination.Next>custom-next</Pagination.Next>\n      </Pagination>,\n    )\n    const btns = wrapper.find('button')\n    expect(btns.at(0).text()).toEqual('custom-prev')\n    expect(btns.at(btns.length - 1).text()).toEqual('custom-next')\n  })\n})\n"
  },
  {
    "path": "components/pagination/index.ts",
    "content": "import Pagination from './pagination'\nimport PaginationPrevious from './pagination-previous'\nimport PaginationNext from './pagination-next'\n\nexport type PaginationComponentType = typeof Pagination & {\n  Previous: typeof PaginationPrevious\n  Next: typeof PaginationNext\n}\n;(Pagination as PaginationComponentType).Previous = PaginationPrevious\n;(Pagination as PaginationComponentType).Next = PaginationNext\n\nexport type { PaginationProps } from './pagination'\nexport type { PaginationPreviousProps } from './pagination-previous'\nexport type { PaginationNextProps } from './pagination-next'\nexport default Pagination as PaginationComponentType\n"
  },
  {
    "path": "components/pagination/pagination-context.ts",
    "content": "import React from 'react'\nimport { tuple } from '../utils/prop-types'\nconst paginationUpdateTypes = tuple('prev', 'next', 'click')\n\nexport type PaginationUpdateType = typeof paginationUpdateTypes[number]\n\nexport interface PaginationConfig {\n  isFirst?: boolean\n  isLast?: boolean\n  update?: (type: PaginationUpdateType) => void\n}\n\nconst defaultContext = {}\n\nexport const PaginationContext = React.createContext<PaginationConfig>(defaultContext)\n\nexport const usePaginationContext = (): PaginationConfig =>\n  React.useContext<PaginationConfig>(PaginationContext)\n"
  },
  {
    "path": "components/pagination/pagination-ellipsis.tsx",
    "content": "import React, { useState } from 'react'\nimport PaginationItem from './pagination-item'\n\ninterface Props {\n  isBefore?: boolean\n  onClick?: (e: React.MouseEvent) => void\n}\n\nconst PaginationEllipsis: React.FC<Props> = ({ isBefore, onClick }) => {\n  const [showMore, setShowMore] = useState(false)\n\n  return (\n    <PaginationItem\n      onClick={e => onClick && onClick(e)}\n      onMouseEnter={() => setShowMore(true)}\n      onMouseLeave={() => setShowMore(false)}>\n      {showMore ? (\n        <svg\n          className=\"more\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          fill=\"none\"\n          shapeRendering=\"geometricPrecision\">\n          <path d=\"M13 17l5-5-5-5\" />\n          <path d=\"M6 17l5-5-5-5\" />\n        </svg>\n      ) : (\n        <svg\n          viewBox=\"0 0 24 24\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          fill=\"none\"\n          shapeRendering=\"geometricPrecision\">\n          <circle cx=\"12\" cy=\"12\" r=\"1\" fill=\"currentColor\" />\n          <circle cx=\"19\" cy=\"12\" r=\"1\" fill=\"currentColor\" />\n          <circle cx=\"5\" cy=\"12\" r=\"1\" fill=\"currentColor\" />\n        </svg>\n      )}\n\n      <style jsx>{`\n        svg {\n          color: currentColor;\n          stroke: currentColor;\n          width: 1em;\n          height: 1em;\n        }\n\n        .more {\n          transform: rotate(${isBefore ? '180deg' : '0deg'});\n        }\n      `}</style>\n    </PaginationItem>\n  )\n}\n\nPaginationEllipsis.displayName = 'GeistPaginationEllipsis'\nexport default PaginationEllipsis\n"
  },
  {
    "path": "components/pagination/pagination-item.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { addColorAlpha } from '../utils/color'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  active?: boolean\n  disabled?: boolean\n  onClick?: (e: React.MouseEvent) => void\n}\n\ntype NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>\nexport type PaginationItemProps = Props & NativeAttrs\n\nconst PaginationItem: React.FC<React.PropsWithChildren<PaginationItemProps>> = ({\n  active,\n  children,\n  disabled,\n  onClick,\n  ...props\n}) => {\n  const theme = useTheme()\n  const [hover, activeHover] = useMemo(\n    () => [\n      addColorAlpha(theme.palette.success, 0.1),\n      addColorAlpha(theme.palette.success, 0.8),\n    ],\n    [theme.palette.success],\n  )\n  const classes = useClasses({\n    active,\n    disabled,\n  })\n\n  const clickHandler = (event: React.MouseEvent) => {\n    if (disabled) return\n    onClick && onClick(event)\n  }\n\n  return (\n    <li>\n      <button className={classes} onClick={clickHandler} {...props}>\n        {children}\n      </button>\n      <style jsx>{`\n        li {\n          margin-right: 0.428em;\n          display: inline-block;\n        }\n        button {\n          border: none;\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          box-sizing: border-box;\n          text-transform: capitalize;\n          user-select: none;\n          white-space: nowrap;\n          text-align: center;\n          vertical-align: middle;\n          box-shadow: none;\n          outline: none;\n          height: var(--pagination-size);\n          min-width: var(--pagination-size);\n          font-size: inherit;\n          cursor: pointer;\n          color: ${theme.palette.success};\n          border-radius: ${theme.layout.radius};\n          background-color: ${theme.palette.background};\n          transition: all linear 200ms 0ms;\n        }\n\n        button:hover {\n          background-color: ${hover};\n        }\n\n        .active {\n          font-weight: bold;\n          background-color: ${theme.palette.success};\n          color: ${theme.palette.background};\n          box-shadow: ${theme.expressiveness.shadowSmall};\n        }\n\n        .active:hover {\n          background-color: ${activeHover};\n          box-shadow: ${theme.expressiveness.shadowMedium};\n        }\n\n        .disabled {\n          color: ${theme.palette.accents_4};\n          cursor: not-allowed;\n        }\n\n        .disabled:hover {\n          background-color: ${theme.palette.accents_2};\n        }\n\n        button :global(svg) {\n          width: 1.3em;\n          height: 1.3em;\n        }\n      `}</style>\n    </li>\n  )\n}\n\nPaginationItem.displayName = 'GeistPaginationItem'\nexport default PaginationItem\n"
  },
  {
    "path": "components/pagination/pagination-next.tsx",
    "content": "import React from 'react'\nimport PaginationItem from './pagination-item'\nimport { usePaginationContext } from './pagination-context'\n\nexport type PaginationNextProps = React.ButtonHTMLAttributes<any>\n\nconst PaginationNext: React.FC<React.PropsWithChildren<PaginationNextProps>> = ({\n  children,\n  ...props\n}) => {\n  const { update, isLast } = usePaginationContext()\n  return (\n    <PaginationItem onClick={() => update && update('next')} disabled={isLast} {...props}>\n      {children}\n    </PaginationItem>\n  )\n}\n\nPaginationNext.displayName = 'GeistPaginationNext'\nexport default PaginationNext\n"
  },
  {
    "path": "components/pagination/pagination-pages.tsx",
    "content": "import React, { Dispatch, SetStateAction, useCallback, useMemo } from 'react'\nimport PaginationItem from './pagination-item'\nimport PaginationEllipsis from './pagination-ellipsis'\n\ninterface Props {\n  limit: number\n  count: number\n  current: number\n  setPage: Dispatch<SetStateAction<number>>\n}\n\nconst PaginationPages: React.FC<Props> = ({ limit, count, current, setPage }) => {\n  const showPages = useMemo(() => {\n    const oddLimit = limit % 2 === 0 ? limit - 1 : limit\n    return oddLimit - 2\n  }, [limit])\n  const middleNumber = (showPages + 1) / 2\n\n  const [showBeforeEllipsis, showAfterEllipsis] = useMemo(() => {\n    const showEllipsis = count > limit\n    return [\n      showEllipsis && current > middleNumber + 1,\n      showEllipsis && current < count - middleNumber,\n    ]\n  }, [current, showPages, middleNumber, count, limit])\n  const pagesArray = useMemo(() => [...new Array(showPages)], [showPages])\n\n  const renderItem = useCallback(\n    (value: number, active: number) => (\n      <PaginationItem\n        key={`pagination-item-${value}`}\n        active={value === active}\n        onClick={() => setPage(value)}>\n        {value}\n      </PaginationItem>\n    ),\n    [],\n  )\n  const startPages = pagesArray.map((_, index) => {\n    const value = index + 2\n    return renderItem(value, current)\n  })\n  const middlePages = pagesArray.map((_, index) => {\n    const middleIndexNumber = middleNumber - (index + 1)\n    const value = current - middleIndexNumber\n    return (\n      <PaginationItem\n        key={`pagination-middle-${index}`}\n        active={index + 1 === middleNumber}\n        onClick={() => setPage(value)}>\n        {value}\n      </PaginationItem>\n    )\n  })\n  const endPages = pagesArray.map((_, index) => {\n    const value = count - (showPages - index)\n    return renderItem(value, current)\n  })\n  if (count <= limit) {\n    /* eslint-disable react/jsx-no-useless-fragment */\n    return (\n      <>\n        {[...new Array(count)].map((_, index) => {\n          const value = index + 1\n          return (\n            <PaginationItem\n              key={`pagination-item-${value}`}\n              active={value === current}\n              onClick={() => setPage(value)}>\n              {value}\n            </PaginationItem>\n          )\n        })}\n      </>\n    )\n    /* eslint-enable */\n  }\n  return (\n    <>\n      {renderItem(1, current)}\n      {showBeforeEllipsis && (\n        <PaginationEllipsis\n          key=\"pagination-ellipsis-before\"\n          isBefore\n          onClick={() => setPage(last => (last - 5 >= 1 ? last - 5 : 1))}\n        />\n      )}\n      {showBeforeEllipsis && showAfterEllipsis\n        ? middlePages\n        : showBeforeEllipsis\n        ? endPages\n        : startPages}\n      {showAfterEllipsis && (\n        <PaginationEllipsis\n          key=\"pagination-ellipsis-after\"\n          onClick={() => setPage(last => (last + 5 <= count ? last + 5 : count))}\n        />\n      )}\n      {renderItem(count, current)}\n    </>\n  )\n}\n\nPaginationPages.displayName = 'GeistPaginationPages'\nexport default PaginationPages\n"
  },
  {
    "path": "components/pagination/pagination-previous.tsx",
    "content": "import React from 'react'\nimport PaginationItem from './pagination-item'\nimport { usePaginationContext } from './pagination-context'\n\nexport type PaginationPreviousProps = React.ButtonHTMLAttributes<any>\n\nconst PaginationPrevious: React.FC<React.PropsWithChildren<PaginationPreviousProps>> = ({\n  children,\n  ...props\n}) => {\n  const { update, isFirst } = usePaginationContext()\n  return (\n    <PaginationItem\n      onClick={() => update && update('prev')}\n      disabled={isFirst}\n      {...props}>\n      {children}\n    </PaginationItem>\n  )\n}\n\nPaginationPrevious.displayName = 'GeistPaginationPrevious'\nexport default PaginationPrevious\n"
  },
  {
    "path": "components/pagination/pagination.tsx",
    "content": "import React, { useEffect, useMemo } from 'react'\nimport PaginationPrevious from './pagination-previous'\nimport PaginationNext from './pagination-next'\nimport PaginationPages from './pagination-pages'\nimport {\n  PaginationContext,\n  PaginationConfig,\n  PaginationUpdateType,\n} from './pagination-context'\nimport useCurrentState from '../utils/use-current-state'\nimport { pickChild } from '../utils/collections'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  page?: number\n  initialPage?: number\n  count?: number\n  limit?: number\n  onChange?: (val: number) => void\n  className?: string\n}\n\nconst defaultProps = {\n  initialPage: 1,\n  count: 1,\n  limit: 7,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type PaginationProps = Props & NativeAttrs\n\nconst PaginationComponent: React.FC<React.PropsWithChildren<PaginationProps>> = ({\n  page: customPage,\n  initialPage,\n  count,\n  limit,\n  children,\n  onChange,\n  className,\n  ...props\n}: React.PropsWithChildren<PaginationProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const [page, setPage, pageRef] = useCurrentState(initialPage)\n  const [, prevChildren] = pickChild(children, PaginationPrevious)\n  const [, nextChildren] = pickChild(children, PaginationNext)\n\n  const [prevItem, nextItem] = useMemo(() => {\n    const hasChildren = (c: any) => React.Children.count(c) > 0\n    const prevDefault = <PaginationPrevious>prev</PaginationPrevious>\n    const nextDefault = <PaginationNext>next</PaginationNext>\n    return [\n      hasChildren(prevChildren) ? prevChildren : prevDefault,\n      hasChildren(nextChildren) ? nextChildren : nextDefault,\n    ]\n  }, [prevChildren, nextChildren])\n\n  const update = (type: PaginationUpdateType) => {\n    if (type === 'prev' && pageRef.current > 1) {\n      setPage(last => last - 1)\n    }\n    if (type === 'next' && pageRef.current < count) {\n      setPage(last => last + 1)\n    }\n  }\n  const values = useMemo<PaginationConfig>(\n    () => ({\n      isFirst: page <= 1,\n      isLast: page >= count,\n      update,\n    }),\n    [page, count],\n  )\n\n  useEffect(() => {\n    onChange && onChange(page)\n  }, [page])\n  useEffect(() => {\n    if (customPage !== undefined) {\n      setPage(customPage)\n    }\n  }, [customPage])\n\n  return (\n    <PaginationContext.Provider value={values}>\n      <nav className={className} {...props}>\n        {prevItem}\n        <PaginationPages count={count} current={page} limit={limit} setPage={setPage} />\n        {nextItem}\n      </nav>\n      <style jsx>{`\n        nav {\n          font-variant: tabular-nums;\n          font-feature-settings: 'tnum';\n          --pagination-size: ${SCALES.font(2)};\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        nav :global(button:last-of-type) {\n          margin-right: 0;\n        }\n      `}</style>\n    </PaginationContext.Provider>\n  )\n}\n\nPaginationComponent.defaultProps = defaultProps\nPaginationComponent.displayName = 'GeistPagination'\nconst Pagination = withScale(PaginationComponent)\nexport default Pagination\n"
  },
  {
    "path": "components/popover/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Popover should render react-node 1`] = `\n\"<div class=\\\\\"tooltip\\\\\"><div></div><style>\n          :global(.tooltip-content.popover > .inner) {\n            padding: calc(0.9 * 16px) 0 calc(0.9 * 16px) 0;\n          }\n        </style><style>\n        .tooltip {\n          width: max-content;\n          display: inline-block;\n        }\n      </style></div>\"\n`;\n\nexports[`Popover should work with different placement 1`] = `\n\"<div class=\\\\\"tooltip\\\\\"><div></div><style>\n          :global(.tooltip-content.popover > .inner) {\n            padding: calc(0.9 * 16px) 0 calc(0.9 * 16px) 0;\n          }\n        </style><style>\n        .tooltip {\n          width: max-content;\n          display: inline-block;\n        }\n      </style></div>\"\n`;\n"
  },
  {
    "path": "components/popover/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, ReactWrapper } from 'enzyme'\nimport { Popover } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\nconst expectPopoverIsShow = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.inner').length).not.toBe(0)\n}\n\nconst expectPopoverIsHidden = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.inner').length).toBe(0)\n}\n\ndescribe('Popover', () => {\n  it('should render correctly', async () => {\n    const wrapper = mount(\n      <Popover content=\"test\">\n        <div />\n      </Popover>,\n    )\n    expectPopoverIsHidden(wrapper)\n\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsHidden(wrapper)\n\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work correctly with props', async () => {\n    const handler = jest.fn()\n    const Demos: React.FC<{ visible?: boolean }> = ({ visible }) => {\n      return (\n        <Popover visible={visible} onVisibleChange={handler} content=\"test\">\n          <div />\n        </Popover>\n      )\n    }\n    const wrapper = mount(<Demos />)\n    expectPopoverIsHidden(wrapper)\n\n    wrapper.setProps({ visible: true })\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n    expect(handler).toBeCalled()\n\n    wrapper.setProps({ visible: false })\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsHidden(wrapper)\n\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render react-node', async () => {\n    const wrapper = mount(\n      <Popover content={<p id=\"test\">custom-content</p>}>\n        <div />\n      </Popover>,\n    )\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n    expect(wrapper.html()).toMatchSnapshot()\n\n    const testNode = wrapper.find('#test')\n    expect(testNode.length).not.toBe(0)\n    expect(testNode.text()).toContain('custom-content')\n  })\n\n  it('should work with different triggers', async () => {\n    const wrapper = mount(\n      <Popover content=\"test\" trigger=\"hover\">\n        <div />\n      </Popover>,\n    )\n    wrapper.find('.tooltip').simulate('mouseEnter')\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n  })\n\n  it('should work with different placement', async () => {\n    const wrapper = mount(\n      <Popover content=\"test\" placement=\"topEnd\">\n        <div />\n      </Popover>,\n    )\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be render each popover item', async () => {\n    const content = () => (\n      <div>\n        <Popover.Item title>\n          <span>settings</span>\n        </Popover.Item>\n        <Popover.Item line />\n        <Popover.Item>\n          <span>Command-Line</span>\n        </Popover.Item>\n      </div>\n    )\n    const wrapper = mount(\n      <Popover content={content}>\n        <div />\n      </Popover>,\n    )\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n\n    const title = wrapper.find('.inner').find('.title')\n    const line = wrapper.find('.inner').find('.line')\n    expect(title.text()).toContain('settings')\n    expect(line.length).not.toBe(0)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should close popover when item clicked', async () => {\n    const wrapper = mount(\n      <Popover content=\"test\">\n        <Popover.Item id=\"item\" />\n      </Popover>,\n    )\n    expectPopoverIsHidden(wrapper)\n\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n\n    const item = wrapper.find('#item').at(0)\n\n    item.simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsHidden(wrapper)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should prevent close popover when item clicked', async () => {\n    const wrapper = mount(\n      <Popover content=\"test\">\n        <Popover.Item id=\"item\" disableAutoClose />\n        <Popover.Item id=\"item2\" />\n      </Popover>,\n    )\n    expectPopoverIsHidden(wrapper)\n\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n\n    const item = wrapper.find('#item').at(0)\n    const item2 = wrapper.find('#item2').at(0)\n\n    item.simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n\n    item2.simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsHidden(wrapper)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should prevent all items', async () => {\n    const wrapper = mount(\n      <Popover content=\"test\" disableItemsAutoClose>\n        <Popover.Item id=\"item\" />\n        <Popover.Item id=\"item2\" />\n      </Popover>,\n    )\n    expectPopoverIsHidden(wrapper)\n\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n\n    const item = wrapper.find('#item').at(0)\n    const item2 = wrapper.find('#item2').at(0)\n\n    item.simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n    item2.simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectPopoverIsShow(wrapper)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/popover/index.ts",
    "content": "import Popover from './popover'\nimport PopoverItem from './popover-item'\n\nexport type PopoverComponentType = typeof Popover & {\n  Item: typeof PopoverItem\n  Option: typeof PopoverItem\n}\n;(Popover as PopoverComponentType).Item = PopoverItem\n;(Popover as PopoverComponentType).Option = PopoverItem\n\nexport type { PopoverProps, PopoverTriggerTypes, PopoverPlacement } from './popover'\nexport type { PopoverItemProps } from './popover-item'\nexport default Popover as PopoverComponentType\n"
  },
  {
    "path": "components/popover/popover-context.ts",
    "content": "import React, { useContext } from 'react'\n\nexport type PopoverConfig = {\n  disableItemsAutoClose: boolean\n  onItemClick: (e: React.MouseEvent<HTMLDivElement>) => void\n}\n\nconst defaultContext = {\n  disableItemsAutoClose: false,\n  onItemClick: () => {},\n}\n\nexport const PopoverContext = React.createContext<PopoverConfig>(defaultContext)\n\nexport const usePopoverContext = () => useContext<PopoverConfig>(PopoverContext)\n"
  },
  {
    "path": "components/popover/popover-item.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport { usePopoverContext } from './popover-context'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  line?: boolean\n  title?: boolean\n  disableAutoClose?: boolean\n  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void\n}\n\nconst defaultProps = {\n  line: false,\n  title: false,\n  disableAutoClose: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type PopoverItemProps = Props & NativeAttrs\n\nconst PopoverItemComponent: React.FC<React.PropsWithChildren<PopoverItemProps>> = ({\n  children,\n  line,\n  title,\n  className,\n  onClick,\n  disableAutoClose,\n  ...props\n}: React.PropsWithChildren<PopoverItemProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { disableItemsAutoClose, onItemClick } = usePopoverContext()\n  const hasHandler = Boolean(onClick)\n  const dontCloseByClick = disableAutoClose || disableItemsAutoClose || title || line\n  const classes = useClasses('item', { line, title }, className)\n\n  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    onClick && onClick(event)\n    if (dontCloseByClick) {\n      return event.stopPropagation()\n    }\n    onItemClick(event)\n  }\n\n  return (\n    <>\n      <div className={classes} onClick={clickHandler} {...props}>\n        {children}\n        <style jsx>{`\n          .item {\n            display: flex;\n            box-sizing: border-box;\n            justify-content: flex-start;\n            align-items: center;\n            color: ${theme.palette.accents_5};\n            transition: color, background-color 150ms linear;\n            line-height: 1.25em;\n            font-size: ${SCALES.font(0.875)};\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, 'auto')};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n            padding: ${SCALES.pt(0.5)} ${SCALES.pr(0.75)} ${SCALES.pb(0.5)}\n              ${SCALES.pl(0.75)};\n            cursor: ${hasHandler ? 'pointer' : 'default'};\n          }\n\n          .item:hover {\n            color: ${theme.palette.foreground};\n          }\n\n          .item.line {\n            line-height: 0;\n            padding: 0;\n            background-color: ${theme.palette.border};\n            height: ${SCALES.height(0.0625)};\n            margin: ${SCALES.mt(0.35)} ${SCALES.mr(0)} ${SCALES.mb(0.35)} ${SCALES.ml(0)};\n            width: ${SCALES.width(1, '100%')};\n          }\n\n          .item.title {\n            font-weight: 500;\n            font-size: ${SCALES.font(0.925)};\n            color: ${theme.palette.foreground};\n          }\n        `}</style>\n      </div>\n      {title && <PopoverItem line title={false} />}\n    </>\n  )\n}\n\nPopoverItemComponent.defaultProps = defaultProps\nPopoverItemComponent.displayName = 'GeistPopoverItem'\nconst PopoverItem = withScale(PopoverItemComponent)\nexport default PopoverItem\n"
  },
  {
    "path": "components/popover/popover.tsx",
    "content": "import React, { useEffect, useMemo, useState } from 'react'\nimport Tooltip, {\n  TooltipOnVisibleChange,\n  TooltipProps,\n  TooltipTypes,\n} from '../tooltip/tooltip'\nimport { Placement, TriggerTypes } from '../utils/prop-types'\nimport { getReactNode } from '../utils/collections'\nimport useScale, { withScale } from '../use-scale'\nimport { PopoverContext, PopoverConfig } from './popover-context'\nimport useClasses from '../use-classes'\n\nexport type PopoverTriggerTypes = TriggerTypes\nexport type PopoverPlacement = Placement\ninterface Props {\n  content?: React.ReactNode | (() => React.ReactNode)\n  trigger?: PopoverTriggerTypes\n  placement?: Placement\n  disableItemsAutoClose?: boolean\n}\n\nconst defaultProps = {\n  disableItemsAutoClose: false,\n  trigger: 'click' as PopoverTriggerTypes,\n  placement: 'bottom' as Placement,\n  portalClassName: '',\n  initialVisible: false,\n  hideArrow: false,\n  type: 'default' as TooltipTypes,\n  enterDelay: 100,\n  leaveDelay: 150,\n  offset: 12,\n  className: '',\n  onVisibleChange: (() => {}) as TooltipOnVisibleChange,\n}\n\ntype ExcludeTooltipProps = {\n  type: any\n  text: any\n  trigger: any\n  placement: any\n}\n\nexport type PopoverProps = Props & Omit<TooltipProps, keyof ExcludeTooltipProps>\n\nconst PopoverComponent: React.FC<React.PropsWithChildren<PopoverProps>> = ({\n  content,\n  children,\n  trigger,\n  placement,\n  initialVisible,\n  portalClassName,\n  disableItemsAutoClose,\n  onVisibleChange,\n  visible: customVisible,\n  ...props\n}: React.PropsWithChildren<PopoverProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const [visible, setVisible] = useState<boolean>(initialVisible)\n  const textNode = useMemo(() => getReactNode(content), [content])\n  const onChildClick = () => {\n    onPopoverVisibleChange(false)\n  }\n  const value = useMemo<PopoverConfig>(\n    () => ({\n      onItemClick: onChildClick,\n      disableItemsAutoClose,\n    }),\n    [disableItemsAutoClose],\n  )\n  const classes = useClasses('popover', portalClassName)\n\n  const onPopoverVisibleChange = (next: boolean) => {\n    setVisible(next)\n    onVisibleChange(next)\n  }\n\n  useEffect(() => {\n    if (customVisible === undefined) return\n    onPopoverVisibleChange(customVisible)\n  }, [customVisible])\n  return (\n    <PopoverContext.Provider value={value}>\n      <Tooltip\n        text={textNode}\n        trigger={trigger}\n        placement={placement}\n        portalClassName={classes}\n        visible={visible}\n        onVisibleChange={onPopoverVisibleChange}\n        {...props}>\n        {children}\n        <style jsx>{`\n          :global(.tooltip-content.popover > .inner) {\n            padding: ${SCALES.pt(0.9)} ${SCALES.pr(0)} ${SCALES.pb(0.9)} ${SCALES.pl(0)};\n          }\n        `}</style>\n      </Tooltip>\n    </PopoverContext.Provider>\n  )\n}\n\nPopoverComponent.defaultProps = defaultProps\nPopoverComponent.displayName = 'GeistPopover'\nconst Popover = withScale(PopoverComponent)\nexport default Popover\n"
  },
  {
    "path": "components/progress/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Progress should be render background-color with color prop 1`] = `\n\"<div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"59%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"59\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #111;\n          width: 59%;\n        }\n      </style></div>\"\n`;\n\nexports[`Progress should fixed 1`] = `\n\"<div><div class=\\\\\"progress fixed\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"59%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"59\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: 0;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #000;\n          width: 59%;\n        }\n      </style></div><div class=\\\\\"progress fixed\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"21%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"21\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: 0;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #000;\n          width: 21%;\n        }\n      </style></div></div>\"\n`;\n\nexports[`Progress should render correctly 1`] = `\n\"<div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"59%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"59\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #000;\n          width: 59%;\n        }\n      </style></div>\"\n`;\n\nexports[`Progress should show different progress by maximum 1`] = `\n\"<div><div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"98.33%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"59\\\\\" max=\\\\\"60\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #000;\n          width: 98.33%;\n        }\n      </style></div><div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"42%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"21\\\\\" max=\\\\\"50\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #000;\n          width: 42%;\n        }\n      </style></div></div>\"\n`;\n\nexports[`Progress should work with different types 1`] = `\n\"<div><div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"59%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"59\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #666;\n          width: 59%;\n        }\n      </style></div><div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"21%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"21\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #0070f3;\n          width: 21%;\n        }\n      </style></div><div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"2%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"2\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #f5a623;\n          width: 2%;\n        }\n      </style></div><div class=\\\\\"progress\\\\\"><div class=\\\\\"inner\\\\\" title=\\\\\"1%\\\\\"></div><progress class=\\\\\"\\\\\" value=\\\\\"1\\\\\" max=\\\\\"100\\\\\"></progress><style>\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: #eaeaea;\n          border-radius: 6px;\n          width: 100%;\n          height: calc(0.625 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .fixed {\n          position: fixed;\n          top: unset;\n          bottom: unset;\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: 6px;\n          background-color: #e00;\n          width: 1%;\n        }\n      </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/progress/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Progress } from 'components'\n\ndescribe('Progress', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Progress value={59} />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different types', () => {\n    const wrapper = mount(\n      <div>\n        <Progress value={59} type=\"secondary\" />\n        <Progress value={21} type=\"success\" />\n        <Progress value={2} type=\"warning\" />\n        <Progress value={1} type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should show different progress by maximum', () => {\n    const wrapper = mount(\n      <div>\n        <Progress value={59} max={60} />\n        <Progress value={21} max={50} />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should fixed', () => {\n    const wrapper = mount(\n      <div>\n        <Progress value={59} fixedTop />\n        <Progress value={21} fixedBottom />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be render background-color with color prop', () => {\n    const colors = {\n      20: '#ccc',\n      100: '#111',\n    }\n    const wrapper = mount(<Progress value={59} colors={colors} />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be ignore wrong colors', () => {\n    const colors = {\n      qq: '#ccc',\n      10: '#111',\n    }\n    const wrapper = mount(<Progress value={59} colors={colors} />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/progress/index.ts",
    "content": "import Progress from './progress'\n\nexport type { ProgressProps, ProgressColors, ProgressTypes } from './progress'\nexport default Progress\n"
  },
  {
    "path": "components/progress/progress.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport { useProportions } from '../utils/calculations'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport { NormalTypes } from '../utils/prop-types'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type ProgressColors = {\n  [key: number]: string\n}\nexport type ProgressTypes = NormalTypes\n\ninterface Props {\n  value?: number\n  max?: number\n  fixedTop?: boolean\n  fixedBottom?: boolean\n  colors?: ProgressColors\n  type?: ProgressTypes\n  className?: string\n}\n\nconst defaultProps = {\n  value: 0,\n  max: 100,\n  type: 'default' as ProgressTypes,\n  fixedTop: false,\n  fixedBottom: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.ProgressHTMLAttributes<any>, keyof Props>\nexport type ProgressProps = Props & NativeAttrs\n\nconst getCurrentColor = (\n  ratio: number,\n  palette: GeistUIThemesPalette,\n  type: ProgressTypes,\n  colors: ProgressColors = {},\n): string => {\n  const defaultColors: { [key in ProgressTypes]: string } = {\n    default: palette.foreground,\n    success: palette.success,\n    secondary: palette.secondary,\n    warning: palette.warning,\n    error: palette.error,\n  }\n  const colorKeys = Object.keys(colors)\n  if (colorKeys.length === 0) return defaultColors[type]\n\n  const customColorKey = colorKeys.find(key => ratio <= +key)\n  if (!customColorKey || Number.isNaN(+customColorKey)) return defaultColors[type]\n  return colors[+customColorKey]\n}\n\nconst ProgressComponent: React.FC<ProgressProps> = ({\n  value,\n  max,\n  className,\n  type,\n  colors,\n  fixedTop,\n  fixedBottom,\n  ...props\n}: ProgressProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const percentValue = useProportions(value, max)\n  const currentColor = getCurrentColor(percentValue, theme.palette, type, colors)\n  const fixed = fixedTop || fixedBottom\n  const classes = useClasses('progress', { fixed }, className)\n\n  return (\n    <div className={classes}>\n      <div className=\"inner\" title={`${percentValue}%`} />\n      <progress className={className} value={value} max={max} {...props} />\n      <style jsx>{`\n        progress {\n          position: fixed;\n          top: -1000px;\n          opacity: 0;\n          visibility: hidden;\n          pointer-events: none;\n        }\n\n        .progress {\n          position: relative;\n          background-color: ${theme.palette.accents_2};\n          border-radius: ${theme.layout.radius};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(0.625)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .fixed {\n          position: fixed;\n          top: ${fixedTop ? 0 : 'unset'};\n          bottom: ${fixedBottom ? 0 : 'unset'};\n          left: 0;\n          border-radius: 0;\n        }\n\n        .fixed > .inner {\n          border-radius: 0;\n        }\n\n        .inner {\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          bottom: 0;\n          transition: all 100ms ease-in;\n          border-radius: ${theme.layout.radius};\n          background-color: ${currentColor};\n          width: ${percentValue}%;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nProgressComponent.defaultProps = defaultProps\nProgressComponent.displayName = 'GeistProgress'\nconst Progress = withScale(ProgressComponent)\nexport default Progress\n"
  },
  {
    "path": "components/radio/__tests__/__snapshots__/group.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Radio Group should render correctly 1`] = `\n\"<div><div class=\\\\\"radio-group\\\\\"><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point active\\\\\"></span>1</span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span>2</span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div></div><style>\n        .radio-group {\n          display: flex;\n          flex-direction: column;\n          --radio-group-gap: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .radio-group :global(.radio) {\n          margin-top: var(--radio-group-gap);\n          margin-left: 0;\n          --radio-size: calc(1 * 16px);\n        }\n\n        .radio-group :global(.radio:first-of-type) {\n          margin: 0;\n        }\n      </style><div class=\\\\\"radio-group\\\\\"><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"1\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point active\\\\\"></span>1</span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"2\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span>2</span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div></div><style>\n        .radio-group {\n          display: flex;\n          flex-direction: col;\n          --radio-group-gap: calc(1 * 16px);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .radio-group :global(.radio) {\n          margin-top: 0;\n          margin-left: var(--radio-group-gap);\n          --radio-size: calc(1 * 16px);\n        }\n\n        .radio-group :global(.radio:first-of-type) {\n          margin: 0;\n        }\n      </style></div>\"\n`;\n"
  },
  {
    "path": "components/radio/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Radio should render correctly 1`] = `\n\"<div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span>Option</span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div>\"\n`;\n\nexports[`Radio should support react-node in description 1`] = `\n\"<div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span>Option</span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span>Option 1</span><span class=\\\\\"\\\\\">Description for Option1<style>\n        span {\n          color: #999;\n          font-size: calc(var(--radio-size) * 0.85);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0\n            calc(var(--radio-size) + var(--radio-size) * 0.375);\n        }\n      </style></span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span>Option 1</span><span class=\\\\\"\\\\\"><b>Description</b> for Option1<style>\n        span {\n          color: #999;\n          font-size: calc(var(--radio-size) * 0.85);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0\n            calc(var(--radio-size) + var(--radio-size) * 0.375);\n        }\n      </style></span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div></div>\"\n`;\n\nexports[`Radio should work with different status 1`] = `\n\"<div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span></span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #000;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #eaeaea;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #000;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span></span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #0070f3;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #0070f3;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #0070f3;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span></span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #f5a623;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #f5a623;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #f5a623;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div><div class=\\\\\"radio\\\\\"><label><input type=\\\\\"radio\\\\\" value=\\\\\"\\\\\"><span class=\\\\\"name\\\\\"><span class=\\\\\"point\\\\\"></span></span></label><style>\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: calc(1 * 16px);\n          width: initial;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: #e00;\n          cursor: pointer;\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid #e00;\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: #e00;\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/radio/__tests__/group.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Radio } from 'components'\nimport { nativeEvent } from 'tests/utils'\n\ndescribe('Radio Group', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <div>\n        <Radio.Group value=\"1\">\n          <Radio value=\"1\">1</Radio>\n          <Radio value=\"2\">2</Radio>\n        </Radio.Group>\n        <Radio.Group value=\"1\" useRow>\n          <Radio value=\"1\">1</Radio>\n          <Radio value=\"2\">2</Radio>\n        </Radio.Group>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should trigger events in group', () => {\n    let value = ''\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(\n      <Radio.Group onChange={changeHandler}>\n        <Radio value=\"1\">Option 1</Radio>\n        <Radio value=\"2\">Option 2</Radio>\n      </Radio.Group>,\n    )\n\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', {\n        ...nativeEvent,\n        target: { checked: true },\n      })\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual('1')\n    changeHandler.mockRestore()\n  })\n\n  it('the radio value should be support number', () => {\n    let value = ''\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(\n      <Radio.Group onChange={changeHandler}>\n        <Radio value={5}>Option 1</Radio>\n        <Radio value={10}>Option 2</Radio>\n      </Radio.Group>,\n    )\n\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', {\n        ...nativeEvent,\n        target: { checked: true },\n      })\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual(5)\n    changeHandler.mockRestore()\n  })\n\n  it('should ignore events when disabled', () => {\n    const changeHandler = jest.fn()\n    const wrapper = mount(\n      <Radio.Group onChange={changeHandler} disabled>\n        <Radio value=\"1\">Option 1</Radio>\n        <Radio value=\"2\">Option 2</Radio>\n      </Radio.Group>,\n    )\n\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', {\n        ...nativeEvent,\n        target: { checked: true },\n      })\n    expect(changeHandler).not.toHaveBeenCalled()\n    changeHandler.mockRestore()\n  })\n\n  it('should render correctly with inital-value', () => {\n    const wrapper = mount(\n      <Radio.Group initialValue=\"2\">\n        <Radio value=\"1\">Option 1</Radio>\n        <Radio value=\"2\">Option 2</Radio>\n      </Radio.Group>,\n    )\n    const input = wrapper.find('input').at(1).getDOMNode() as HTMLInputElement\n    expect(input.checked).toEqual(true)\n  })\n\n  it('should be warning when value unset', () => {\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})\n    mount(\n      <Radio.Group>\n        <Radio>Option 1</Radio>\n        <Radio value=\"2\">Option 2</Radio>\n      </Radio.Group>,\n    )\n\n    expect(errorSpy).toHaveBeenCalled()\n    errorSpy.mockRestore()\n  })\n\n  it('should be warning when checked is set', () => {\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})\n    mount(\n      <Radio.Group>\n        <Radio value=\"1\" checked>\n          Option 1\n        </Radio>\n        <Radio value=\"2\">Option 2</Radio>\n      </Radio.Group>,\n    )\n\n    expect(errorSpy).toHaveBeenCalled()\n    errorSpy.mockRestore()\n  })\n\n  it('should set state through value prop', () => {\n    const wrapper = mount(\n      <Radio.Group>\n        <Radio value=\"1\">Option 1</Radio>\n        <Radio value=\"2\">Option 2</Radio>\n      </Radio.Group>,\n    )\n    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.checked).toEqual(false)\n\n    wrapper.setProps({ value: '1' })\n    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.checked).toEqual(true)\n\n    wrapper.setProps({ value: '2' })\n    input = wrapper.find('input').at(1).getDOMNode() as HTMLInputElement\n    expect(input.checked).toEqual(true)\n  })\n})\n"
  },
  {
    "path": "components/radio/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Radio } from 'components'\nimport { nativeEvent } from 'tests/utils'\n\ndescribe('Radio', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Radio checked={false}>Option</Radio>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different status', () => {\n    const wrapper = mount(\n      <div>\n        <Radio type=\"secondary\" />\n        <Radio type=\"success\" />\n        <Radio type=\"warning\" />\n        <Radio type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('should render correctly with checked prop', () => {\n    const wrapper = mount(<Radio>Option</Radio>)\n    wrapper.setProps({ checked: false })\n    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.checked).toEqual(false)\n\n    wrapper.setProps({ checked: true })\n    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.checked).toEqual(true)\n  })\n\n  it('should trigger events when use alone', () => {\n    const changeHandler = jest.fn()\n    const wrapper = mount(<Radio onChange={changeHandler}>Option</Radio>)\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', {\n        ...nativeEvent,\n        target: { checked: true },\n      })\n    expect(changeHandler).toHaveBeenCalled()\n    changeHandler.mockRestore()\n  })\n\n  it('should ignore events when disabled', () => {\n    const changeHandler = jest.fn()\n    const wrapper = mount(\n      <Radio onChange={changeHandler} disabled>\n        Option\n      </Radio>,\n    )\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', {\n        ...nativeEvent,\n        target: { checked: true },\n      })\n    expect(changeHandler).not.toHaveBeenCalled()\n    changeHandler.mockRestore()\n  })\n\n  it('should support react-node in description', () => {\n    const wrapper = mount(\n      <div>\n        <Radio>Option</Radio>\n        <Radio>\n          Option 1<Radio.Desc>Description for Option1</Radio.Desc>\n        </Radio>\n        <Radio>\n          Option 1\n          <Radio.Desc>\n            <b>Description</b> for Option1\n          </Radio.Desc>\n        </Radio>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/radio/index.ts",
    "content": "import Radio from './radio'\nimport RadioGroup from './radio-group'\nimport RadioDescription from './radio-description'\n\nexport type RadioComponentType = typeof Radio & {\n  Group: typeof RadioGroup\n  Description: typeof RadioDescription\n  Desc: typeof RadioDescription\n}\n;(Radio as RadioComponentType).Group = RadioGroup\n;(Radio as RadioComponentType).Description = RadioDescription\n;(Radio as RadioComponentType).Desc = RadioDescription\n\nexport type { RadioProps, RadioEvent, RadioEventTarget, RadioTypes } from './radio'\nexport type { RadioGroupProps } from './radio-group'\nexport type { RadioDescriptionProps } from './radio-description'\nexport default Radio as RadioComponentType\n"
  },
  {
    "path": "components/radio/radio-context.ts",
    "content": "import React from 'react'\n\nexport interface RadioConfig {\n  updateState?: (value: string | number) => void\n  disabledAll: boolean\n  value?: string | number\n  inGroup: boolean\n}\n\nconst defaultContext = {\n  disabledAll: false,\n  inGroup: false,\n}\n\nexport const RadioContext = React.createContext<RadioConfig>(defaultContext)\n\nexport const useRadioContext = (): RadioConfig =>\n  React.useContext<RadioConfig>(RadioContext)\n"
  },
  {
    "path": "components/radio/radio-description.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type RadioDescriptionProps = Props & NativeAttrs\n\nconst RadioDescriptionComponent: React.FC<\n  React.PropsWithChildren<RadioDescriptionProps>\n> = ({\n  className,\n  children,\n  ...props\n}: React.PropsWithChildren<RadioDescriptionProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n\n  return (\n    <span className={className} {...props}>\n      {children}\n      <style jsx>{`\n        span {\n          color: ${theme.palette.accents_3};\n          font-size: ${SCALES.font(0.85, 'calc(var(--radio-size) * 0.85)')};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)}\n            ${SCALES.ml(0, 'calc(var(--radio-size) + var(--radio-size) * 0.375)')};\n        }\n      `}</style>\n    </span>\n  )\n}\n\nRadioDescriptionComponent.defaultProps = defaultProps\nRadioDescriptionComponent.displayName = 'GeistRadioDescription'\nconst RadioDescription = withScale(RadioDescriptionComponent)\nexport default RadioDescription\n"
  },
  {
    "path": "components/radio/radio-group.tsx",
    "content": "import React, { useEffect, useMemo, useState } from 'react'\nimport { RadioContext } from './radio-context'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  value?: string | number\n  initialValue?: string | number\n  disabled?: boolean\n  onChange?: (value: string | number) => void\n  className?: string\n  useRow?: boolean\n}\n\nconst defaultProps = {\n  disabled: false,\n  className: '',\n  useRow: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type RadioGroupProps = Props & NativeAttrs\n\nconst RadioGroupComponent: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({\n  disabled,\n  onChange,\n  value,\n  children,\n  className,\n  initialValue,\n  useRow,\n  ...props\n}: React.PropsWithChildren<RadioGroupProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const [selfVal, setSelfVal] = useState<string | number | undefined>(initialValue)\n  const updateState = (nextValue: string | number) => {\n    setSelfVal(nextValue)\n    onChange && onChange(nextValue)\n  }\n\n  const providerValue = useMemo(() => {\n    return {\n      updateState,\n      disabledAll: disabled,\n      inGroup: true,\n      value: selfVal,\n    }\n  }, [disabled, selfVal])\n\n  useEffect(() => {\n    if (value === undefined) return\n    setSelfVal(value)\n  }, [value])\n\n  return (\n    <RadioContext.Provider value={providerValue}>\n      <div className={useClasses('radio-group', className)} {...props}>\n        {children}\n      </div>\n      <style jsx>{`\n        .radio-group {\n          display: flex;\n          flex-direction: ${useRow ? 'col' : 'column'};\n          --radio-group-gap: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .radio-group :global(.radio) {\n          margin-top: ${useRow ? 0 : 'var(--radio-group-gap)'};\n          margin-left: ${useRow ? 'var(--radio-group-gap)' : 0};\n          --radio-size: ${SCALES.font(1)};\n        }\n\n        .radio-group :global(.radio:first-of-type) {\n          margin: 0;\n        }\n      `}</style>\n    </RadioContext.Provider>\n  )\n}\n\nRadioGroupComponent.defaultProps = defaultProps\nRadioGroupComponent.displayName = 'GeistRadioGroup'\nconst RadioGroup = withScale(RadioGroupComponent)\nexport default RadioGroup\n"
  },
  {
    "path": "components/radio/radio.tsx",
    "content": "import React, { useEffect, useMemo, useState } from 'react'\nimport useTheme from '../use-theme'\nimport { useRadioContext } from './radio-context'\nimport RadioDescription from './radio-description'\nimport { pickChild } from '../utils/collections'\nimport useWarning from '../utils/use-warning'\nimport { NormalTypes } from '../utils/prop-types'\nimport { getColors } from './styles'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type RadioTypes = NormalTypes\nexport interface RadioEventTarget {\n  checked: boolean\n}\nexport interface RadioEvent {\n  target: RadioEventTarget\n  stopPropagation: () => void\n  preventDefault: () => void\n  nativeEvent: React.ChangeEvent\n}\n\ninterface Props {\n  checked?: boolean\n  value?: string | number\n  type?: RadioTypes\n  className?: string\n  disabled?: boolean\n  onChange?: (e: RadioEvent) => void\n}\n\nconst defaultProps = {\n  type: 'default' as RadioTypes,\n  disabled: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>\nexport type RadioProps = Props & NativeAttrs\n\nconst RadioComponent: React.FC<React.PropsWithChildren<RadioProps>> = ({\n  className,\n  checked,\n  onChange,\n  disabled,\n  type,\n  value: radioValue,\n  children,\n  ...props\n}: React.PropsWithChildren<RadioProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const [selfChecked, setSelfChecked] = useState<boolean>(!!checked)\n  const { value: groupValue, disabledAll, inGroup, updateState } = useRadioContext()\n  const [withoutDescChildren, DescChildren] = pickChild(children, RadioDescription)\n\n  if (inGroup) {\n    if (checked !== undefined) {\n      useWarning('Remove props \"checked\" if in the Radio.Group.', 'Radio')\n    }\n    if (radioValue === undefined) {\n      useWarning('Props \"value\" must be deinfed if in the Radio.Group.', 'Radio')\n    }\n    useEffect(() => {\n      setSelfChecked(groupValue === radioValue)\n    }, [groupValue, radioValue])\n  }\n\n  const { label, border, bg } = useMemo(\n    () => getColors(theme.palette, type),\n    [theme.palette, type],\n  )\n\n  const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll])\n  const changeHandler = (event: React.ChangeEvent) => {\n    if (isDisabled) return\n    const selfEvent: RadioEvent = {\n      target: {\n        checked: !selfChecked,\n      },\n      stopPropagation: event.stopPropagation,\n      preventDefault: event.preventDefault,\n      nativeEvent: event,\n    }\n    setSelfChecked(!selfChecked)\n    if (inGroup) {\n      updateState && updateState(radioValue as string | number)\n    }\n    onChange && onChange(selfEvent)\n  }\n\n  useEffect(() => {\n    if (checked === undefined) return\n    setSelfChecked(Boolean(checked))\n  }, [checked])\n\n  return (\n    <div className={useClasses('radio', className)}>\n      <label>\n        <input\n          type=\"radio\"\n          value={radioValue}\n          checked={selfChecked}\n          onChange={changeHandler}\n          {...props}\n        />\n        <span className=\"name\">\n          <span className={useClasses('point', { active: selfChecked })} />\n          {withoutDescChildren}\n        </span>\n        {DescChildren && DescChildren}\n      </label>\n      <style jsx>{`\n        input {\n          opacity: 0;\n          visibility: hidden;\n          overflow: hidden;\n          width: 1px;\n          height: 1px;\n          top: -1000px;\n          right: -1000px;\n          position: fixed;\n          font-size: 0;\n        }\n        .radio {\n          display: flex;\n          align-items: flex-start;\n          position: relative;\n          --radio-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, 'initial')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n        label {\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-start;\n          color: ${isDisabled ? theme.palette.accents_4 : label};\n          cursor: ${isDisabled ? 'not-allowed' : 'pointer'};\n        }\n        .name {\n          font-size: var(--radio-size);\n          font-weight: bold;\n          user-select: none;\n          display: inline-flex;\n          align-items: center;\n        }\n        .point {\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          border: 1px solid ${border};\n          transition: all 0.2s ease 0s;\n          position: relative;\n          display: inline-block;\n          transform: scale(0.875);\n          margin-right: calc(var(--radio-size) * 0.375);\n        }\n        .point:before {\n          content: '';\n          position: absolute;\n          left: -1px;\n          top: -1px;\n          transform: scale(0);\n          height: var(--radio-size);\n          width: var(--radio-size);\n          border-radius: 50%;\n          background-color: ${isDisabled ? theme.palette.accents_4 : bg};\n        }\n        .active:before {\n          transform: scale(0.875);\n          transition: all 0.2s ease 0s;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nRadioComponent.defaultProps = defaultProps\nRadioComponent.displayName = 'GeistRadio'\nconst Radio = withScale(RadioComponent)\nexport default Radio\n"
  },
  {
    "path": "components/radio/styles.ts",
    "content": "import { GeistUIThemesPalette } from '../themes/presets'\nimport { NormalTypes } from '../utils/prop-types'\n\nexport type RadioColor = {\n  label: string\n  border: string\n  bg: string\n}\n\nexport const getColors = (\n  palette: GeistUIThemesPalette,\n  status?: NormalTypes,\n): RadioColor => {\n  const colors: { [key in NormalTypes]: RadioColor } = {\n    default: {\n      label: palette.foreground,\n      border: palette.border,\n      bg: palette.foreground,\n    },\n    secondary: {\n      label: palette.foreground,\n      border: palette.border,\n      bg: palette.foreground,\n    },\n    success: {\n      label: palette.success,\n      border: palette.success,\n      bg: palette.success,\n    },\n    warning: {\n      label: palette.warning,\n      border: palette.warning,\n      bg: palette.warning,\n    },\n    error: {\n      label: palette.error,\n      border: palette.error,\n      bg: palette.error,\n    },\n  }\n\n  if (!status) return colors.default\n  return colors[status]\n}\n"
  },
  {
    "path": "components/rating/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Rating should render correctly 1`] = `\n\"<div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #000;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #000;\n          transform: scale(0.9);\n        }\n      </style></div>\"\n`;\n\nexports[`Rating should show different initialization values 1`] = `\n\"<div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #000;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #000;\n          transform: scale(0.9);\n        }\n      </style></div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #000;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #000;\n          transform: scale(0.9);\n        }\n      </style></div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #000;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #000;\n          transform: scale(0.9);\n        }\n      </style></div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #000;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #000;\n          transform: scale(0.9);\n        }\n      </style></div></div>\"\n`;\n\nexports[`Rating should update snapshot on mouse enter 1`] = `\n\"<div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #0070f3;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #0070f3;\n          transform: scale(0.9);\n        }\n      </style></div><div id=\\\\\"valueDiv\\\\\">5</div><div id=\\\\\"lockDiv\\\\\">false</div></div>\"\n`;\n\nexports[`Rating should update snapshot on mouse enter 2`] = `\n\"<div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #0070f3;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: default;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #0070f3;\n          transform: scale(0.9);\n        }\n      </style></div><div id=\\\\\"valueDiv\\\\\">5</div><div id=\\\\\"lockDiv\\\\\">true</div></div>\"\n`;\n\nexports[`Rating should work with different types 1`] = `\n\"<div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #000;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #000;\n          transform: scale(0.9);\n        }\n      </style></div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #0070f3;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #0070f3;\n          transform: scale(0.9);\n        }\n      </style></div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #f5a623;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #f5a623;\n          transform: scale(0.9);\n        }\n      </style></div><div class=\\\\\"rating\\\\\"><div class=\\\\\"icon-box hovered\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><div class=\\\\\"icon-box\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" width=\\\\\"24\\\\\" height=\\\\\"24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\\\\\"></path></svg></div><style>\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: calc(1 * 16px);\n          font-size: var(--rating-font-size);\n          width: auto;\n          height: auto;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: #e00;\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: pointer;\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: #e00;\n          transform: scale(0.9);\n        }\n      </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/rating/__tests__/index.test.tsx",
    "content": "import React, { useState } from 'react'\nimport { Rating } from 'components'\nimport { mount } from 'enzyme'\nimport { nativeEvent } from 'tests/utils'\n\ndescribe('Rating', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Rating />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different types', () => {\n    const wrapper = mount(\n      <div>\n        <Rating type=\"secondary\" />\n        <Rating type=\"success\" />\n        <Rating type=\"warning\" />\n        <Rating type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should show different initialization values', () => {\n    const wrapper = mount(\n      <div>\n        <Rating count={10} value={5} />\n        <Rating count={2} value={1} />\n        <Rating count={10} value={10} />\n        <Rating count={2} value={2} />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should initialize state and lock value', () => {\n    const WrapperRating = () => {\n      const [value, setValue] = useState<number>(1)\n      const [lock, setLock] = useState<boolean>(false)\n\n      return (\n        <div>\n          <Rating\n            type=\"success\"\n            value={value}\n            onLockedChange={setLock}\n            onValueChange={setValue}\n          />\n          <div id=\"valueDiv\">{value}</div>\n          <div id=\"lockDiv\">{lock ? 'true' : 'false'}</div>\n        </div>\n      )\n    }\n    const wrapper = mount(<WrapperRating />)\n    expect(wrapper.find('svg').children())\n    expect(wrapper.find('#valueDiv').text()).toContain('1')\n    expect(wrapper.find('#lockDiv').text()).toContain('false')\n  })\n\n  it('should update state and lock value on click', () => {\n    const WrapperRating = () => {\n      const [value, setValue] = useState<number>(1)\n      const [lock, setLock] = useState<boolean>(false)\n\n      return (\n        <div>\n          <Rating type=\"success\" onLockedChange={setLock} onValueChange={setValue} />\n          <div id=\"valueDiv\">{value}</div>\n          <div id=\"lockDiv\">{lock ? 'true' : 'false'}</div>\n        </div>\n      )\n    }\n    const wrapper = mount(<WrapperRating />)\n    expect(wrapper.find('.icon-box').last().simulate('click', nativeEvent))\n    expect(wrapper.find('#valueDiv').text()).toContain('5')\n    expect(wrapper.find('#lockDiv').text()).toContain('true')\n    // unlock again\n    expect(wrapper.find('.icon-box').last().simulate('click', nativeEvent))\n    expect(wrapper.find('#valueDiv').text()).toContain('5')\n    expect(wrapper.find('#lockDiv').text()).toContain('false')\n  })\n\n  it('should update snapshot on mouse enter', () => {\n    const WrapperRating = () => {\n      const [value, setValue] = useState<number>(0)\n      const [lock, setLock] = useState<boolean>(false)\n\n      return (\n        <div>\n          <Rating type=\"success\" onLockedChange={setLock} onValueChange={setValue} />\n          <div id=\"valueDiv\">{value}</div>\n          <div id=\"lockDiv\">{lock ? 'true' : 'false'}</div>\n        </div>\n      )\n    }\n    const wrapper = mount(<WrapperRating />)\n    const lastStar = wrapper.find('.icon-box').last()\n    const firstStar = wrapper.find('.icon-box').first()\n    expect(lastStar.simulate('mouseenter'))\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(lastStar.simulate('click', nativeEvent))\n    expect(firstStar.simulate('mouseenter'))\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "components/rating/index.ts",
    "content": "import Rating from './rating'\n\nexport type { RatingProps, RatingTypes, RatingCount, RatingValue } from './rating'\nexport default Rating\n"
  },
  {
    "path": "components/rating/rating-icon.tsx",
    "content": "import React from 'react'\n\nconst RatingIcon: React.FC<unknown> = () => {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\">\n      <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n    </svg>\n  )\n}\n\nRatingIcon.displayName = 'GeistRatingIcon'\nexport default RatingIcon\n"
  },
  {
    "path": "components/rating/rating.tsx",
    "content": "import React, { useEffect, useMemo, useState } from 'react'\nimport { GeistUIThemesPalette } from '../themes'\nimport { NormalTypes, tupleNumber } from '../utils/prop-types'\nimport RatingIcon from './rating-icon'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type RatingTypes = NormalTypes\nconst ratingCountTuple = tupleNumber(2, 3, 4, 5, 6, 7, 8, 9, 10)\nconst ratingValueTuple = tupleNumber(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10)\nexport type RatingValue = typeof ratingValueTuple[number]\nexport type RatingCount = typeof ratingCountTuple[number]\n\ninterface Props {\n  type?: RatingTypes\n  className?: string\n  icon?: JSX.Element\n  count?: RatingCount | number\n  value?: RatingValue | number\n  initialValue?: RatingValue\n  onValueChange?: (value: number) => void\n  locked?: boolean\n  onLockedChange?: (locked: boolean) => void\n}\n\nconst defaultProps = {\n  type: 'default' as RatingTypes,\n  className: '',\n  icon: (<RatingIcon />) as JSX.Element,\n  count: 5 as RatingCount,\n  initialValue: 1 as RatingValue,\n  locked: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type RatingProps = Props & NativeAttrs\n\nconst getColor = (type: RatingTypes, palette: GeistUIThemesPalette): string => {\n  const colors: { [key in RatingTypes]?: string } = {\n    default: palette.foreground,\n    success: palette.success,\n    warning: palette.warning,\n    error: palette.error,\n  }\n  return colors[type] || (colors.default as string)\n}\n\nconst RatingComponent: React.FC<RatingProps> = ({\n  type,\n  className,\n  icon,\n  count,\n  value: customValue,\n  initialValue,\n  onValueChange,\n  locked,\n  onLockedChange,\n  ...props\n}: React.PropsWithChildren<RatingProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const color = useMemo(() => getColor(type, theme.palette), [type, theme.palette])\n  const [value, setValue] = useState<number>(initialValue)\n  const [isLocked, setIsLocked] = useState<boolean>(locked)\n\n  const lockedChangeHandler = (next: boolean) => {\n    setIsLocked(next)\n    onLockedChange && onLockedChange(next)\n  }\n  const valueChangeHandler = (next: number) => {\n    setValue(next)\n    const emitValue = next > count ? count : next\n    onValueChange && onValueChange(emitValue)\n  }\n  const clickHandler = (index: number) => {\n    if (isLocked) return lockedChangeHandler(false)\n    valueChangeHandler(index)\n    lockedChangeHandler(true)\n  }\n  const mouseEnterHandler = (index: number) => {\n    if (isLocked) return\n    valueChangeHandler(index)\n  }\n\n  useEffect(() => {\n    if (typeof customValue === 'undefined') return\n    setValue(customValue < 0 ? 0 : customValue)\n  }, [customValue])\n\n  return (\n    <div className={useClasses('rating', className)} {...props}>\n      {[...Array(count)].map((_, index) => (\n        <div\n          className={useClasses('icon-box', {\n            hovered: index + 1 <= value,\n          })}\n          key={index}\n          onMouseEnter={() => mouseEnterHandler(index + 1)}\n          onClick={() => clickHandler(index + 1)}>\n          {icon}\n        </div>\n      ))}\n      <style jsx>{`\n        .rating {\n          box-sizing: border-box;\n          display: inline-flex;\n          align-items: center;\n          --rating-font-size: ${SCALES.font(1)};\n          font-size: var(--rating-font-size);\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n        .icon-box {\n          box-sizing: border-box;\n          color: ${color};\n          width: calc(var(--rating-font-size) * 1.5);\n          height: calc(var(--rating-font-size) * 1.5);\n          margin-right: calc(var(--rating-font-size) * 1 / 5);\n          cursor: ${isLocked ? 'default' : 'pointer'};\n        }\n        .icon-box :global(svg) {\n          width: 100%;\n          height: 100%;\n          fill: transparent;\n          transform: scale(1);\n          transition: transform, color, fill 30ms linear;\n        }\n        .hovered :global(svg) {\n          fill: ${color};\n          transform: scale(0.9);\n        }\n      `}</style>\n    </div>\n  )\n}\n\nRatingComponent.defaultProps = defaultProps\nRatingComponent.displayName = 'GeistRating'\nconst Rating = withScale(RatingComponent)\nexport default Rating\n"
  },
  {
    "path": "components/row/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Row should render correctly 1`] = `\n\"<div class=\\\\\"row \\\\\">row<style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div>\"\n`;\n\nexports[`Row should work with nested 1`] = `\n\"<div class=\\\\\"row \\\\\"><div class=\\\\\"row \\\\\"><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><div class=\\\\\"row \\\\\">row<style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div>\"\n`;\n\nexports[`Row the children should be aligned correctly 1`] = `\n\"<div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: flex-end;\n          align-items: normal;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: center;\n          align-items: normal;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: space-around;\n          align-items: normal;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: space-between;\n          align-items: normal;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: center;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(0 * 16pt / 2);\n          margin-right: calc(0 * 16pt / 2);\n          --row-gap: calc(0 * 16pt);\n          justify-content: normal;\n          align-items: flex-end;\n        }\n      </style></div></div>\"\n`;\n\nexports[`Row the children should have the correct spacing 1`] = `\n\"<div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(1 * 16pt / 2);\n          margin-right: calc(1 * 16pt / 2);\n          --row-gap: calc(1 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(2 * 16pt / 2);\n          margin-right: calc(2 * 16pt / 2);\n          --row-gap: calc(2 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div><div class=\\\\\"row \\\\\"><div class=\\\\\"col \\\\\"><style>\n        .col {\n          float: left;\n          box-sizing: border-box;\n          padding-left: calc(var(--row-gap) / 2);\n          padding-right: calc(var(--row-gap) / 2);\n          width: 100%;\n          margin-left: 0%;\n        }\n      </style></div><style>\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(10 * 16pt / 2);\n          margin-right: calc(10 * 16pt / 2);\n          --row-gap: calc(10 * 16pt);\n          justify-content: normal;\n          align-items: normal;\n        }\n      </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/row/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport Row from '../index'\nimport Col from '../../col'\n\ndescribe('Row', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Row>row</Row>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be render differnet components', () => {\n    const wrapper = mount(<Row>row</Row>)\n    wrapper.setProps({ component: 'span' })\n    expect(wrapper.find('span').length).not.toBe(0)\n\n    wrapper.setProps({ component: 'p' })\n    expect(wrapper.find('p').length).not.toBe(0)\n\n    wrapper.setProps({ component: 'details' })\n    expect(wrapper.find('details').length).not.toBe(0)\n  })\n\n  it('the children should be aligned correctly', () => {\n    const wrapper = mount(\n      <div>\n        <Row justify=\"end\">\n          <Col />\n        </Row>\n        <Row justify=\"center\">\n          <Col />\n        </Row>\n        <Row justify=\"space-around\">\n          <Col />\n        </Row>\n        <Row justify=\"space-between\">\n          <Col />\n        </Row>\n        <Row align=\"top\">\n          <Col />\n        </Row>\n        <Row align=\"middle\">\n          <Col />\n        </Row>\n        <Row align=\"bottom\">\n          <Col />\n        </Row>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the children should have the correct spacing', () => {\n    const wrapper = mount(\n      <div>\n        <Row gap={1}>\n          <Col />\n        </Row>\n        <Row gap={2}>\n          <Col />\n        </Row>\n        <Row gap={10}>\n          <Col />\n        </Row>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with nested', () => {\n    const wrapper = mount(\n      <Row>\n        <Row>\n          <Row>\n            <Col>\n              <Row>row</Row>\n            </Col>\n          </Row>\n        </Row>\n      </Row>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/row/index.ts",
    "content": "import Row from './row'\n\nexport type { RowProps } from './row'\nexport default Row\n"
  },
  {
    "path": "components/row/row.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\n\ntype Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between'\ntype Align = 'top' | 'middle' | 'bottom'\n\ninterface Props {\n  gap?: number\n  justify?: Justify\n  align?: Align\n  component?: keyof JSX.IntrinsicElements\n  className?: string\n}\n\nconst defaultProps = {\n  gap: 0,\n  justify: 'start' as Justify,\n  align: 'top' as Align,\n  component: 'div' as keyof JSX.IntrinsicElements,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type RowProps = Props & NativeAttrs\n\nconst getFlexAlignment = (justify: Justify, align: Align) => {\n  const flexJustifyMap: { [key in Justify]?: string } = {\n    end: 'flex-end',\n    center: 'center',\n    'space-around': 'space-around',\n    'space-between': 'space-between',\n  }\n  const flexAlignMap: { [key in Align]?: string } = {\n    middle: 'center',\n    bottom: 'flex-end',\n  }\n  return {\n    justifyValue: flexJustifyMap[justify] || 'normal',\n    alignValue: flexAlignMap[align] || 'normal',\n  }\n}\n\nconst Container: React.FC<React.PropsWithChildren<RowProps>> = ({\n  children,\n  component,\n  gap,\n  justify,\n  align,\n  className,\n  ...props\n}: React.PropsWithChildren<RowProps> & typeof defaultProps) => {\n  const Component = component\n  const theme = useTheme()\n  const { justifyValue, alignValue } = useMemo(\n    () => getFlexAlignment(justify, align),\n    [justify, align],\n  )\n\n  return (\n    <Component className={`row ${className}`} {...props}>\n      {children}\n      <style jsx>{`\n        .row {\n          display: flex;\n          position: relative;\n          box-sizing: border-box;\n          margin-left: calc(${gap} * ${theme.layout.gap} / 2);\n          margin-right: calc(${gap} * ${theme.layout.gap} / 2);\n          --row-gap: calc(${gap} * ${theme.layout.gap});\n          justify-content: ${justifyValue};\n          align-items: ${alignValue};\n        }\n      `}</style>\n    </Component>\n  )\n}\n\nContainer.defaultProps = defaultProps\nContainer.displayName = 'GeistContainer'\nexport default Container\n"
  },
  {
    "path": "components/select/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Select should render correctly 1`] = `\n\"<div><div class=\\\\\"select\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          </style></div><div class=\\\\\"select\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(1.3125 * 16px);\n              --select-height: calc(3.375 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.501 * 16px) 0\n                calc(1.0005000000000002 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.501 * 16px) calc(0.501 * 16px) calc(0.501 * 16px)\n                calc(1.0005000000000002 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          </style></div></div>\"\n`;\n\nexports[`Select should work correctly with labels 1`] = `\n\"<div class=\\\\\"select\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          </style></div>\"\n`;\n\nexports[`Select should work with different icons 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"select\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"aria-expanded\": \"false\",\n          \"aria-haspopup\": \"listbox\",\n          \"readonly\": \"\",\n          \"role\": \"combobox\",\n          \"type\": \"search\",\n          \"unselectable\": \"on\",\n        },\n        \"children\": Array [],\n        \"name\": \"input\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"value placeholder\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"aria-expanded\": undefined,\n          \"aria-haspopup\": undefined,\n          \"readonly\": undefined,\n          \"role\": undefined,\n          \"type\": undefined,\n          \"unselectable\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"aria-expanded\": undefined,\n          \"aria-haspopup\": undefined,\n          \"readonly\": undefined,\n          \"role\": undefined,\n          \"type\": undefined,\n          \"unselectable\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"value placeholder\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"aria-expanded\": \"false\",\n            \"aria-haspopup\": \"listbox\",\n            \"readonly\": \"\",\n            \"role\": \"combobox\",\n            \"type\": \"search\",\n            \"unselectable\": \"on\",\n          },\n          \"children\": Array [],\n          \"name\": \"input\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"aria-expanded\": undefined,\n            \"aria-haspopup\": undefined,\n            \"readonly\": undefined,\n            \"role\": undefined,\n            \"type\": undefined,\n            \"unselectable\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"aria-expanded\": undefined,\n            \"aria-haspopup\": undefined,\n            \"readonly\": undefined,\n            \"role\": undefined,\n            \"type\": undefined,\n            \"unselectable\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"value placeholder\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"aria-expanded\": \"false\",\n              \"aria-haspopup\": \"listbox\",\n              \"readonly\": \"\",\n              \"role\": \"combobox\",\n              \"type\": \"search\",\n              \"unselectable\": \"on\",\n            },\n            \"children\": Array [],\n            \"name\": \"input\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"aria-expanded\": undefined,\n              \"aria-haspopup\": undefined,\n              \"readonly\": undefined,\n              \"role\": undefined,\n              \"type\": undefined,\n              \"unselectable\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"aria-expanded\": undefined,\n              \"aria-haspopup\": undefined,\n              \"readonly\": undefined,\n              \"role\": undefined,\n              \"type\": undefined,\n              \"unselectable\": undefined,\n            },\n          },\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"value placeholder\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"aria-expanded\": \"false\",\n                \"aria-haspopup\": \"listbox\",\n                \"readonly\": \"\",\n                \"role\": \"combobox\",\n                \"type\": \"search\",\n                \"unselectable\": \"on\",\n              },\n              \"children\": Array [],\n              \"name\": \"input\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"aria-expanded\": undefined,\n                \"aria-haspopup\": undefined,\n                \"readonly\": undefined,\n                \"role\": undefined,\n                \"type\": undefined,\n                \"unselectable\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"aria-expanded\": undefined,\n                \"aria-haspopup\": undefined,\n                \"readonly\": undefined,\n                \"role\": undefined,\n                \"type\": undefined,\n                \"unselectable\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Select should work with different icons 2`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"select\",\n    },\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"aria-expanded\": \"false\",\n          \"aria-haspopup\": \"listbox\",\n          \"readonly\": \"\",\n          \"role\": \"combobox\",\n          \"type\": \"search\",\n          \"unselectable\": \"on\",\n        },\n        \"children\": Array [],\n        \"name\": \"input\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"value placeholder\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"icon\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"icon\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"aria-expanded\": undefined,\n          \"aria-haspopup\": undefined,\n          \"readonly\": undefined,\n          \"role\": undefined,\n          \"type\": undefined,\n          \"unselectable\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"aria-expanded\": undefined,\n          \"aria-haspopup\": undefined,\n          \"readonly\": undefined,\n          \"role\": undefined,\n          \"type\": undefined,\n          \"unselectable\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"value placeholder\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"icon\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"icon\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"aria-expanded\": \"false\",\n            \"aria-haspopup\": \"listbox\",\n            \"readonly\": \"\",\n            \"role\": \"combobox\",\n            \"type\": \"search\",\n            \"unselectable\": \"on\",\n          },\n          \"children\": Array [],\n          \"name\": \"input\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"aria-expanded\": undefined,\n            \"aria-haspopup\": undefined,\n            \"readonly\": undefined,\n            \"role\": undefined,\n            \"type\": undefined,\n            \"unselectable\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"aria-expanded\": undefined,\n            \"aria-haspopup\": undefined,\n            \"readonly\": undefined,\n            \"role\": undefined,\n            \"type\": undefined,\n            \"unselectable\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"value placeholder\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"icon\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"icon\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"aria-expanded\": \"false\",\n              \"aria-haspopup\": \"listbox\",\n              \"readonly\": \"\",\n              \"role\": \"combobox\",\n              \"type\": \"search\",\n              \"unselectable\": \"on\",\n            },\n            \"children\": Array [],\n            \"name\": \"input\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"aria-expanded\": undefined,\n              \"aria-haspopup\": undefined,\n              \"readonly\": undefined,\n              \"role\": undefined,\n              \"type\": undefined,\n              \"unselectable\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"aria-expanded\": undefined,\n              \"aria-haspopup\": undefined,\n              \"readonly\": undefined,\n              \"role\": undefined,\n              \"type\": undefined,\n              \"unselectable\": undefined,\n            },\n          },\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"icon\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"icon\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"value placeholder\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"aria-expanded\": \"false\",\n                \"aria-haspopup\": \"listbox\",\n                \"readonly\": \"\",\n                \"role\": \"combobox\",\n                \"type\": \"search\",\n                \"unselectable\": \"on\",\n              },\n              \"children\": Array [],\n              \"name\": \"input\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"aria-expanded\": undefined,\n                \"aria-haspopup\": undefined,\n                \"readonly\": undefined,\n                \"role\": undefined,\n                \"type\": undefined,\n                \"unselectable\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"aria-expanded\": undefined,\n                \"aria-haspopup\": undefined,\n                \"readonly\": undefined,\n                \"role\": undefined,\n                \"type\": undefined,\n                \"unselectable\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value &gt; :global(div),\n            .value &gt; :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"icon\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"icon\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"value placeholder\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"aria-expanded\": \"false\",\n                  \"aria-haspopup\": \"listbox\",\n                  \"readonly\": \"\",\n                  \"role\": \"combobox\",\n                  \"type\": \"search\",\n                  \"unselectable\": \"on\",\n                },\n                \"children\": Array [],\n                \"name\": \"input\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"aria-expanded\": undefined,\n                  \"aria-haspopup\": undefined,\n                  \"readonly\": undefined,\n                  \"role\": undefined,\n                  \"type\": undefined,\n                  \"unselectable\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"aria-expanded\": undefined,\n                  \"aria-haspopup\": undefined,\n                  \"readonly\": undefined,\n                  \"role\": undefined,\n                  \"type\": undefined,\n                  \"unselectable\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Select should work with different status 1`] = `\n\"<div><div class=\\\\\"select\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          </style></div><div class=\\\\\"select\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #3291ff;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #0761d1;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #0761d1;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #0070f3;\n            }\n          </style></div><div class=\\\\\"select\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #f7b955;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #ab570a;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #ab570a;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #f5a623;\n            }\n          </style></div><div class=\\\\\"select\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #ff1a1a;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #c50000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #c50000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #e00;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #e00;\n            }\n          </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/select/__tests__/__snapshots__/multiple.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Select Multiple should render correctly 1`] = `\n\"<div class=\\\\\"select multiple\\\\\"><input type=\\\\\"search\\\\\" role=\\\\\"combobox\\\\\" aria-haspopup=\\\\\"listbox\\\\\" readonly=\\\\\"\\\\\" unselectable=\\\\\"on\\\\\" aria-expanded=\\\\\"false\\\\\"><style>\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        </style><span class=\\\\\"value placeholder\\\\\"><span><style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: var(--select-height);\n          min-width: 0;\n        }\n      </style></span></span><div class=\\\\\"item mock\\\\\"><style>\n        .item {\n          font-size: inherit;\n          height: auto;\n        }\n        .justify {\n          justify-content: undefined;\n        }\n        .direction {\n          flex-direction: undefined;\n        }\n        .alignContent {\n          align-content: undefined;\n        }\n        .alignItems {\n          align-items: undefined;\n        }\n        .xs {\n          flex-grow: 1;\n          max-width: 100%;\n          flex-basis: 0;\n          display: inherit;\n        }\n        @media only screen and (min-width: 650px) {\n          .sm {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 900px) {\n          .md {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1280px) {\n          .lg {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n        @media only screen and (min-width: 1920px) {\n          .xl {\n            flex-grow: 1;\n            max-width: 100%;\n            flex-basis: 0;\n            display: inherit;\n          }\n        }\n      </style></div><div class=\\\\\"icon\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke-width=\\\\\"1\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\"><path d=\\\\\"M6 9l6 6 6-6\\\\\"></path><style>\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      </style></svg></div><style>\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: pointer;\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid #eaeaea;\n              border-radius: 6px;\n\n              background-color: #fff;\n              --select-font-size: calc(0.875 * 16px);\n              --select-height: calc(2.25 * 16px);\n              min-width: 11.5em;\n              width: initial;\n              height: var(--select-height);\n              padding: 0 calc(0.334 * 16px) 0\n                calc(0.667 * 16px);\n              margin: 0 0 0 0;\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: calc(0.334 * 16px) calc(0.334 * 16px) calc(0.334 * 16px)\n                calc(0.667 * 16px);\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: #000;\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: #000;\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: #000;\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: #999;\n            }\n\n            .icon {\n              position: absolute;\n              right: 4pt;\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(0deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: #666;\n            }\n          </style></div>\"\n`;\n"
  },
  {
    "path": "components/select/__tests__/events.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Select } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\ndescribe('Select Events', () => {\n  let container: HTMLDivElement\n\n  beforeEach(() => {\n    container = document.createElement('div')\n    document.body.append(container)\n  })\n\n  it('ref should be able to control the focus correctly', () => {\n    const ref = React.createRef<HTMLDivElement>()\n    const wrapper = mount(<Select ref={ref} />, { attachTo: container })\n    const input = wrapper.find('input').at(0).getDOMNode()\n    expect(document.activeElement?.outerHTML).not.toEqual(input.outerHTML)\n    ref.current?.focus()\n    expect(document.activeElement?.outerHTML).toEqual(input.outerHTML)\n    ref.current?.blur()\n    expect(document.activeElement?.outerHTML).not.toEqual(input.outerHTML)\n  })\n\n  it('should prevent mouse event when click background', async () => {\n    let visible = false\n    const handler = jest.fn().mockImplementation(next => {\n      visible = next\n    })\n    const wrapper = mount(<Select onDropdownVisibleChange={handler} />, {\n      attachTo: container,\n    })\n    expect(visible).toBe(false)\n    expect(handler).not.toBeCalled()\n    wrapper.find('.select').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 300)\n    expect(visible).toBe(true)\n    expect(handler).toBeCalledTimes(1)\n\n    wrapper.find('.dropdown').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 300)\n    expect(visible).toBe(true)\n    expect(handler).toBeCalledTimes(1)\n  })\n\n  it('scrollTo should be work correctly', async () => {\n    const ref = React.createRef<HTMLDivElement>()\n    const handler = jest.fn()\n    window.HTMLElement.prototype.scrollTo = jest.fn().mockImplementation(handler)\n    const wrapper = mount(\n      <Select ref={ref}>\n        <Select.Option value=\"hello\">world</Select.Option>\n      </Select>,\n      { attachTo: container },\n    )\n    wrapper.find('.select').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 300)\n    ref.current?.scrollTo({ top: 200 })\n    expect(handler).toBeCalled()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  afterEach(() => {\n    document.body.removeChild(container!)\n  })\n})\n"
  },
  {
    "path": "components/select/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Select } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\ndescribe('Select', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <div>\n        <Select />\n        <Select scale={2} />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different status', () => {\n    const wrapper = mount(\n      <div>\n        <Select type=\"secondary\" />\n        <Select type=\"success\" />\n        <Select type=\"warning\" />\n        <Select type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('should work correctly with labels', () => {\n    const wrapper = mount(\n      <Select>\n        <Select.Option label>1</Select.Option>\n        <Select.Option divider>1</Select.Option>\n        <Select.Option divider label>\n          1\n        </Select.Option>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different icons', () => {\n    const MockIcon = () => <span>icon</span>\n    const pure = render(<Select pure />)\n    expect(pure).toMatchSnapshot()\n\n    const icon = render(<Select icon={MockIcon} />)\n    expect(icon).toMatchSnapshot()\n  })\n\n  it('should render value with initial-value', () => {\n    const wrapper = mount(\n      <Select initialValue=\"2\">\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    expect(wrapper.find('.value').text()).toContain('Option 2')\n  })\n\n  it('should trigger events when option changed', async () => {\n    let value = ''\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(\n      <Select onChange={changeHandler}>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    wrapper.find('.select').simulate('click', nativeEvent)\n    wrapper.find('.select-dropdown').find('.option').at(0).simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual('1')\n    changeHandler.mockRestore()\n  })\n\n  it('should ignore events when disabled', async () => {\n    const changeHandler = jest.fn()\n    const wrapper = mount(\n      <Select onChange={changeHandler} disabled>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    wrapper.find('.select').simulate('click', nativeEvent)\n    expect(wrapper.find('.select-dropdown').length).toBe(0)\n    changeHandler.mockRestore()\n  })\n\n  it('should ignore option when option disabled', async () => {\n    let value = ''\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(\n      <Select onChange={changeHandler}>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\" disabled>\n          Option 2\n        </Select.Option>\n      </Select>,\n    )\n    wrapper.find('.select').simulate('click', nativeEvent)\n    wrapper.find('.select-dropdown').find('.option').at(1).simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expect(changeHandler).not.toHaveBeenCalled()\n    expect(value).not.toEqual('2')\n    changeHandler.mockRestore()\n  })\n\n  it('should ignore option when prevent all', async () => {\n    let value = ''\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(\n      <Select onChange={changeHandler}>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\" preventAllEvents>\n          Option 2\n        </Select.Option>\n      </Select>,\n    )\n    wrapper.find('.select').simulate('click', nativeEvent)\n    wrapper.find('.select-dropdown').find('.option').at(1).simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expect(changeHandler).not.toHaveBeenCalled()\n    expect(value).not.toEqual('2')\n    changeHandler.mockRestore()\n  })\n\n  it('should be change when value changed', async () => {\n    const wrapper = mount(\n      <Select>\n        <Select.Option value=\"1\">Option 1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n\n    wrapper.setProps({ value: '2' })\n    await updateWrapper(wrapper, 300)\n    expect(wrapper.find('.value').text()).toContain('Option 2')\n\n    wrapper.setProps({ value: '1' })\n    await updateWrapper(wrapper, 300)\n    expect(wrapper.find('.value').text()).toContain('Option 1')\n  })\n\n  it('should be wraning when ident value missing', () => {\n    let errorMessage = ''\n    const errorSpy = jest\n      .spyOn(console, 'error')\n      .mockImplementation(msg => (errorMessage = msg))\n    const SelectOption = Select.Option as any\n    const wrapper = mount(\n      <Select>\n        <SelectOption>1</SelectOption>\n      </Select>,\n    )\n    wrapper.find('.select').simulate('click', nativeEvent)\n\n    expect(errorMessage).toContain('required')\n    errorSpy.mockRestore()\n  })\n})\n"
  },
  {
    "path": "components/select/__tests__/multiple.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Select } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\ndescribe('Select Multiple', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Select multiple>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render correctly with clearable option', () => {\n    const wrapper = mount(\n      <Select multiple initialValue={['1']}>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    expect(wrapper.find('.clear-icon').length).toBe(1)\n  })\n\n  it('should render correctly without clearable option', () => {\n    const wrapper = mount(\n      <Select multiple clearable={false} initialValue={['1']}>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    expect(wrapper.find('.clear-icon').length).toBe(0)\n  })\n\n  it('should render value with initial-value', () => {\n    const wrapper = mount(\n      <Select initialValue={['1', '2']} multiple>\n        <Select.Option value=\"1\">test-1</Select.Option>\n        <Select.Option value=\"2\">test-2</Select.Option>\n        <Select.Option value=\"3\">test-3</Select.Option>\n      </Select>,\n    )\n    expect(wrapper.find('.option').length).toBeGreaterThan(1)\n    const text = wrapper\n      .find('.option')\n      .map(item => item.text())\n      .reduce((pre, current) => `${pre}${current}`, '')\n    expect(text.includes('test-1')).toBeTruthy()\n    expect(text.includes('test-2')).toBeTruthy()\n    expect(text.includes('test-3')).not.toBeTruthy()\n  })\n\n  it('should trigger events when option changed', async () => {\n    let value = ''\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(\n      <Select onChange={changeHandler} multiple>\n        <Select.Option value=\"1\">1</Select.Option>\n        <Select.Option value=\"2\">Option 2</Select.Option>\n      </Select>,\n    )\n    wrapper.find('.select').simulate('click', nativeEvent)\n    wrapper.find('.select-dropdown').find('.option').at(0).simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expect(changeHandler).toHaveBeenCalled()\n    expect(Array.isArray(value)).toBeTruthy()\n    expect(value.includes('1')).toBeTruthy()\n\n    wrapper.find('.select-dropdown').find('.option').at(0).simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expect(Array.isArray(value)).toBeTruthy()\n    expect(value.includes('1')).not.toBeTruthy()\n    changeHandler.mockRestore()\n  })\n})\n\nit('should trigger event correctly when clicked', async () => {\n  const changeHandler = jest.fn()\n  const wrapper = mount(\n    <Select onChange={changeHandler} multiple initialValue={['1']}>\n      <Select.Option value=\"1\">1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>,\n  )\n  expect(wrapper.find('.clear-icon').length).toBe(1)\n  wrapper.find('.clear-icon').simulate('click', nativeEvent)\n  await updateWrapper(wrapper, 350)\n  expect(changeHandler).toHaveBeenCalled()\n  expect(wrapper.find('.clear-icon').length).toBe(0)\n})\n"
  },
  {
    "path": "components/select/index.ts",
    "content": "import Select from './select'\nimport SelectOption from './select-option'\n\nexport type SelectComponentType = typeof Select & {\n  Option: typeof SelectOption\n}\n;(Select as SelectComponentType).Option = SelectOption\n\nexport type { SelectProps, SelectTypes, SelectRef } from './select'\nexport type { SelectOptionProps } from './select-option'\nexport default Select as SelectComponentType\n"
  },
  {
    "path": "components/select/select-context.ts",
    "content": "import React, { MutableRefObject } from 'react'\n\nexport interface SelectConfig {\n  value?: string | string[]\n  updateValue?: (next: string | undefined) => unknown\n  visible?: boolean\n  updateVisible?: (next: boolean) => unknown\n  disableAll?: boolean\n  ref?: MutableRefObject<HTMLElement | null>\n}\n\nconst defaultContext = {\n  visible: false,\n  disableAll: false,\n}\n\nexport const SelectContext = React.createContext<SelectConfig>(defaultContext)\n\nexport const useSelectContext = (): SelectConfig =>\n  React.useContext<SelectConfig>(SelectContext)\n"
  },
  {
    "path": "components/select/select-dropdown.tsx",
    "content": "import React, { CSSProperties, useImperativeHandle, useRef } from 'react'\nimport useTheme from '../use-theme'\nimport { useSelectContext } from './select-context'\nimport Dropdown from '../shared/dropdown'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  visible: boolean\n  className?: string\n  dropdownStyle?: CSSProperties\n  disableMatchWidth?: boolean\n  getPopupContainer?: () => HTMLElement | null\n}\n\nconst defaultProps = {\n  className: '',\n  dropdownStyle: {},\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SelectDropdownProps = Props & NativeAttrs\n\nconst SelectDropdown = React.forwardRef<\n  HTMLDivElement | null,\n  React.PropsWithChildren<SelectDropdownProps>\n>(\n  (\n    {\n      visible,\n      children,\n      className,\n      dropdownStyle,\n      disableMatchWidth,\n      getPopupContainer,\n    }: React.PropsWithChildren<SelectDropdownProps> & typeof defaultProps,\n    dropdownRef,\n  ) => {\n    const theme = useTheme()\n    const internalDropdownRef = useRef<HTMLDivElement | null>(null)\n    const { ref } = useSelectContext()\n    const classes = useClasses('select-dropdown', className)\n\n    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(\n      dropdownRef,\n      () => internalDropdownRef.current,\n    )\n\n    return (\n      <Dropdown\n        parent={ref}\n        visible={visible}\n        disableMatchWidth={disableMatchWidth}\n        getPopupContainer={getPopupContainer}>\n        <div ref={internalDropdownRef} className={classes} style={dropdownStyle}>\n          {children}\n          <style jsx>{`\n            .select-dropdown {\n              border-radius: ${theme.layout.radius};\n              box-shadow: ${theme.expressiveness.shadowLarge};\n              background-color: ${theme.palette.background};\n              max-height: 17em;\n              overflow-y: auto;\n              overflow-anchor: none;\n              padding: 0.38em 0;\n              scroll-behavior: smooth;\n            }\n          `}</style>\n        </div>\n      </Dropdown>\n    )\n  },\n)\n\nSelectDropdown.defaultProps = defaultProps\nSelectDropdown.displayName = 'GeistSelectDropdown'\nexport default SelectDropdown\n"
  },
  {
    "path": "components/select/select-icon-clear.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\n\ninterface Props {\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void\n}\n\nconst SelectIconClear: React.FC<Props> = ({ onClick }) => {\n  const theme = useTheme()\n  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    event.stopPropagation()\n    event.nativeEvent.stopImmediatePropagation()\n    onClick && onClick(event)\n  }\n  return (\n    <div onClick={clickHandler} className=\"clear-icon\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        fill=\"none\"\n        shapeRendering=\"geometricPrecision\">\n        <path d=\"M18 6L6 18\" />\n        <path d=\"M6 6l12 12\" />\n      </svg>\n\n      <style jsx>{`\n        .clear-icon {\n          padding: 0 0 0 0.5em;\n          margin: 0;\n          display: inline-flex;\n          align-items: center;\n          height: 100%;\n          cursor: pointer;\n          box-sizing: border-box;\n          transition: color 150ms ease 0s;\n          color: ${theme.palette.accents_3};\n          visibility: visible;\n          opacity: 1;\n        }\n\n        .clear-icon:hover {\n          color: ${theme.palette.foreground};\n        }\n\n        svg {\n          color: currentColor;\n          width: 1em;\n          height: 1em;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nconst MemoSelectIconClear = React.memo(SelectIconClear)\n\nexport default MemoSelectIconClear\n"
  },
  {
    "path": "components/select/select-icon.tsx",
    "content": "import React from 'react'\n\nconst SelectIconComponent: React.FC<unknown> = () => {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      strokeWidth=\"1\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\">\n      <path d=\"M6 9l6 6 6-6\" />\n      <style jsx>{`\n        svg {\n          color: inherit;\n          stroke: currentColor;\n          transition: all 200ms ease;\n          width: 1.214em;\n          height: 1.214em;\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nSelectIconComponent.displayName = 'GeistSelectIcon'\nconst SelectIcon = React.memo(SelectIconComponent)\nexport default SelectIcon\n"
  },
  {
    "path": "components/select/select-input.tsx",
    "content": "import React, { useEffect, useImperativeHandle, useRef } from 'react'\n\nexport type SelectInputProps = {\n  visible: boolean\n  onBlur: () => void\n  onFocus: () => void\n}\n\nconst SelectInput = React.forwardRef<HTMLInputElement | null, SelectInputProps>(\n  ({ visible, onBlur, onFocus }, inputRef) => {\n    const ref = useRef<HTMLInputElement | null>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      inputRef,\n      () => ref.current,\n    )\n\n    useEffect(() => {\n      if (visible) {\n        ref.current?.focus()\n      }\n    }, [visible])\n\n    return (\n      <>\n        <input\n          ref={ref}\n          type=\"search\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          readOnly\n          unselectable=\"on\"\n          aria-expanded={visible}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        />\n        <style jsx>{`\n          input {\n            position: fixed;\n            top: -10000px;\n            left: -10000px;\n            opacity: 0;\n            z-index: -1;\n            width: 0;\n            height: 0;\n            padding: 0;\n            font-size: 0;\n            border: none;\n          }\n        `}</style>\n      </>\n    )\n  },\n)\n\nSelectInput.displayName = 'GeistSelectInput'\nexport default SelectInput\n"
  },
  {
    "path": "components/select/select-multiple-value.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport Grid from '../grid'\nimport SelectClearIcon from './select-icon-clear'\n\ninterface Props {\n  disabled: boolean\n  onClear: (() => void) | null\n}\n\nconst SelectMultipleValue: React.FC<React.PropsWithChildren<Props>> = ({\n  disabled,\n  onClear,\n  children,\n}) => {\n  const theme = useTheme()\n\n  return (\n    <Grid>\n      <div className=\"item\">\n        {children}\n        {!!onClear && <SelectClearIcon onClick={onClear} />}\n      </div>\n      <style jsx>{`\n        .item {\n          display: inline-flex;\n          justify-items: center;\n          align-items: center;\n          line-height: 1;\n          padding: 0 0.5em;\n          font-size: var(--select-font-size);\n          height: calc(var(--select-font-size) * 2);\n          border-radius: ${theme.layout.radius};\n          background-color: ${theme.palette.accents_2};\n          color: ${disabled ? theme.palette.accents_4 : theme.palette.accents_6};\n        }\n\n        .item > :global(div:not(.clear-icon)),\n        .item > :global(div:not(.clear-icon):hover) {\n          border-radius: 0;\n          background-color: transparent;\n          padding: 0;\n          margin: 0;\n          color: inherit;\n        }\n      `}</style>\n    </Grid>\n  )\n}\n\nSelectMultipleValue.displayName = 'GeistSelectMultipleValue'\nexport default SelectMultipleValue\n"
  },
  {
    "path": "components/select/select-option.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { useSelectContext } from './select-context'\nimport useWarning from '../utils/use-warning'\nimport Ellipsis from '../shared/ellipsis'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  value?: string\n  disabled?: boolean\n  className?: string\n  divider?: boolean\n  label?: boolean\n  preventAllEvents?: boolean\n}\n\nconst defaultProps = {\n  disabled: false,\n  divider: false,\n  label: false,\n  className: '',\n  preventAllEvents: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SelectOptionProps = Props & NativeAttrs\n\nconst SelectOptionComponent: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({\n  value: identValue,\n  className,\n  children,\n  disabled,\n  divider,\n  label,\n  preventAllEvents,\n  ...props\n}: React.PropsWithChildren<SelectOptionProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { updateValue, value, disableAll } = useSelectContext()\n  const isDisabled = useMemo(() => disabled || disableAll, [disabled, disableAll])\n  const isLabel = useMemo(() => label || divider, [label, divider])\n  const classes = useClasses('option', { divider, label }, className)\n  if (!isLabel && identValue === undefined) {\n    useWarning('The props \"value\" is required.', 'Select Option')\n  }\n\n  const selected = useMemo(() => {\n    if (!value) return false\n    if (typeof value === 'string') {\n      return identValue === value\n    }\n    return value.includes(`${identValue}`)\n  }, [identValue, value])\n\n  const bgColor = useMemo(() => {\n    if (isDisabled) return theme.palette.accents_1\n    return selected ? theme.palette.accents_2 : theme.palette.background\n  }, [selected, isDisabled, theme.palette])\n\n  const hoverBgColor = useMemo(() => {\n    if (isDisabled || isLabel || selected) return bgColor\n    return theme.palette.accents_1\n  }, [selected, isDisabled, theme.palette, isLabel, bgColor])\n\n  const color = useMemo(() => {\n    if (isDisabled) return theme.palette.accents_4\n    return selected ? theme.palette.foreground : theme.palette.accents_5\n  }, [selected, isDisabled, theme.palette])\n\n  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (preventAllEvents) return\n    event.stopPropagation()\n    event.nativeEvent.stopImmediatePropagation()\n    event.preventDefault()\n    if (isDisabled || isLabel) return\n    updateValue && updateValue(identValue)\n  }\n\n  return (\n    <div className={classes} onClick={clickHandler} {...props}>\n      <Ellipsis height={SCALES.height(2.25)}>{children}</Ellipsis>\n      <style jsx>{`\n        .option {\n          display: flex;\n          max-width: 100%;\n          box-sizing: border-box;\n          justify-content: flex-start;\n          align-items: center;\n          font-weight: normal;\n          background-color: ${bgColor};\n          color: ${color};\n          user-select: none;\n          border: 0;\n          cursor: ${isDisabled ? 'not-allowed' : 'pointer'};\n          transition: background 0.2s ease 0s, border-color 0.2s ease 0s;\n          --select-font-size: ${SCALES.font(0.75)};\n          font-size: var(--select-font-size);\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(2.25)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0.667)} ${SCALES.pb(0)} ${SCALES.pl(0.667)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .option:hover {\n          background-color: ${hoverBgColor};\n          color: ${theme.palette.accents_7};\n        }\n\n        .divider {\n          line-height: 0;\n          overflow: hidden;\n          border-top: 1px solid ${theme.palette.border};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(1, 0)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0.5)} ${SCALES.mr(0)} ${SCALES.mb(0.5)} ${SCALES.ml(0)};\n        }\n\n        .label {\n          color: ${theme.palette.accents_7};\n          border-bottom: 1px solid ${theme.palette.border};\n          text-transform: capitalize;\n          cursor: default;\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, '100%')};\n          font-weight: 500;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nSelectOptionComponent.defaultProps = defaultProps\nSelectOptionComponent.displayName = 'GeistSelectOption'\nconst SelectOption = withScale(SelectOptionComponent)\nexport default SelectOption\n"
  },
  {
    "path": "components/select/select.tsx",
    "content": "import React, {\n  CSSProperties,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { NormalTypes } from '../utils/prop-types'\nimport useTheme from '../use-theme'\nimport useCurrentState from '../utils/use-current-state'\nimport { pickChildByProps } from '../utils/collections'\nimport SelectIcon from './select-icon'\nimport SelectDropdown from './select-dropdown'\nimport SelectMultipleValue from './select-multiple-value'\nimport Grid from '../grid'\nimport { SelectContext, SelectConfig } from './select-context'\nimport { getColors } from './styles'\nimport Ellipsis from '../shared/ellipsis'\nimport SelectInput from './select-input'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type SelectRef = {\n  focus: () => void\n  blur: () => void\n  scrollTo?: (options?: ScrollToOptions) => void\n}\nexport type SelectTypes = NormalTypes\ninterface Props {\n  disabled?: boolean\n  type?: SelectTypes\n  value?: string | string[]\n  initialValue?: string | string[]\n  placeholder?: React.ReactNode | string\n  icon?: React.ComponentType\n  onChange?: (value: string | string[]) => void\n  pure?: boolean\n  multiple?: boolean\n  clearable?: boolean\n  className?: string\n  dropdownClassName?: string\n  dropdownStyle?: CSSProperties\n  disableMatchWidth?: boolean\n  onDropdownVisibleChange?: (visible: boolean) => void\n  getPopupContainer?: () => HTMLElement | null\n}\n\nconst defaultProps = {\n  disabled: false,\n  type: 'default' as SelectTypes,\n  icon: SelectIcon as React.ComponentType,\n  pure: false,\n  multiple: false,\n  clearable: true,\n  className: '',\n  disableMatchWidth: false,\n  onDropdownVisibleChange: () => {},\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SelectProps = Props & NativeAttrs\n\nconst SelectComponent = React.forwardRef<SelectRef, React.PropsWithChildren<SelectProps>>(\n  (\n    {\n      children,\n      type,\n      disabled,\n      initialValue: init,\n      value: customValue,\n      icon: Icon,\n      onChange,\n      pure,\n      multiple,\n      clearable,\n      placeholder,\n      className,\n      dropdownClassName,\n      dropdownStyle,\n      disableMatchWidth,\n      getPopupContainer,\n      onDropdownVisibleChange,\n      ...props\n    }: React.PropsWithChildren<SelectProps> & typeof defaultProps,\n    selectRef,\n  ) => {\n    const theme = useTheme()\n    const { SCALES } = useScale()\n    const ref = useRef<HTMLDivElement>(null)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const dropdownRef = useRef<HTMLDivElement>(null)\n    const [visible, setVisible] = useState<boolean>(false)\n    const [selectFocus, setSelectFocus] = useState<boolean>(false)\n    const [value, setValue, valueRef] = useCurrentState<string | string[] | undefined>(\n      () => {\n        if (!multiple) return init\n        if (Array.isArray(init)) return init\n        return typeof init === 'undefined' ? [] : [init]\n      },\n    )\n    const isEmpty = useMemo(() => {\n      if (!Array.isArray(value)) return !value\n      return value.length === 0\n    }, [value])\n\n    const { border, borderActive, iconBorder, placeholderColor } = useMemo(\n      () => getColors(theme.palette, type),\n      [theme.palette, type],\n    )\n\n    const updateVisible = (next: boolean) => {\n      onDropdownVisibleChange(next)\n      setVisible(next)\n    }\n    const updateValue = (next: string) => {\n      setValue(last => {\n        if (!Array.isArray(last)) return next\n        if (!last.includes(next)) return [...last, next]\n        return last.filter(item => item !== next)\n      })\n      onChange && onChange(valueRef.current as string | string[])\n      if (!multiple) {\n        updateVisible(false)\n      }\n    }\n\n    const initialValue: SelectConfig = useMemo(\n      () => ({\n        value,\n        visible,\n        updateValue,\n        updateVisible,\n        ref,\n        disableAll: disabled,\n      }),\n      [visible, disabled, ref, value, multiple],\n    )\n\n    const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n      event.stopPropagation()\n      event.nativeEvent.stopImmediatePropagation()\n      event.preventDefault()\n      if (disabled) return\n\n      updateVisible(!visible)\n      event.preventDefault()\n    }\n    const mouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n      /* istanbul ignore next */\n      if (visible) {\n        event.preventDefault()\n      }\n    }\n\n    useEffect(() => {\n      if (customValue === undefined) return\n      setValue(customValue)\n    }, [customValue])\n    useImperativeHandle(\n      selectRef,\n      () => ({\n        focus: () => inputRef.current?.focus(),\n        blur: () => inputRef.current?.blur(),\n        scrollTo: options => dropdownRef.current?.scrollTo(options),\n      }),\n      [inputRef, dropdownRef],\n    )\n\n    const selectedChild = useMemo(() => {\n      const [, optionChildren] = pickChildByProps(children, 'value', value)\n      return React.Children.map(optionChildren, child => {\n        if (!React.isValidElement(child)) return null\n        const el = React.cloneElement(child, { preventAllEvents: true })\n        if (!multiple) return el\n        return (\n          <SelectMultipleValue\n            disabled={disabled}\n            onClear={clearable ? () => updateValue(child.props.value) : null}>\n            {el}\n          </SelectMultipleValue>\n        )\n      })\n    }, [value, children, multiple])\n\n    const onInputBlur = () => {\n      updateVisible(false)\n      setSelectFocus(false)\n    }\n    const classes = useClasses(\n      'select',\n      {\n        active: selectFocus || visible,\n        multiple,\n      },\n      className,\n    )\n\n    return (\n      <SelectContext.Provider value={initialValue}>\n        <div\n          className={classes}\n          ref={ref}\n          onClick={clickHandler}\n          onMouseDown={mouseDownHandler}\n          {...props}>\n          <SelectInput\n            ref={inputRef}\n            visible={visible}\n            onBlur={onInputBlur}\n            onFocus={() => setSelectFocus(true)}\n          />\n          {isEmpty && (\n            <span className=\"value placeholder\">\n              <Ellipsis height=\"var(--select-height)\">{placeholder}</Ellipsis>\n            </span>\n          )}\n          {value && !multiple && <span className=\"value\">{selectedChild}</span>}\n          {value && multiple && (\n            <Grid.Container gap={0.5}>{selectedChild}</Grid.Container>\n          )}\n          <SelectDropdown\n            ref={dropdownRef}\n            visible={visible}\n            className={dropdownClassName}\n            dropdownStyle={dropdownStyle}\n            disableMatchWidth={disableMatchWidth}\n            getPopupContainer={getPopupContainer}>\n            {children}\n          </SelectDropdown>\n          {!pure && (\n            <div className=\"icon\">\n              <Icon />\n            </div>\n          )}\n          <style jsx>{`\n            .select {\n              display: inline-flex;\n              align-items: center;\n              user-select: none;\n              white-space: nowrap;\n              position: relative;\n              cursor: ${disabled ? 'not-allowed' : 'pointer'};\n              max-width: 90vw;\n              overflow: hidden;\n              transition: border 150ms ease-in 0s, color 200ms ease-out 0s,\n                box-shadow 200ms ease 0s;\n              border: 1px solid ${border};\n              border-radius: ${theme.layout.radius};\n\n              background-color: ${disabled\n                ? theme.palette.accents_1\n                : theme.palette.background};\n              --select-font-size: ${SCALES.font(0.875)};\n              --select-height: ${SCALES.height(2.25)};\n              min-width: 11.5em;\n              width: ${SCALES.width(1, 'initial')};\n              height: var(--select-height);\n              padding: ${SCALES.pt(0)} ${SCALES.pr(0.334)} ${SCALES.pb(0)}\n                ${SCALES.pl(0.667)};\n              margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n            }\n\n            .multiple {\n              height: auto;\n              min-height: var(--select-height);\n              padding: ${SCALES.pt(0.334)} ${SCALES.pr(0.334)} ${SCALES.pb(0.334)}\n                ${SCALES.pl(0.667)};\n            }\n\n            .select.active,\n            .select:hover {\n              border-color: ${disabled ? theme.palette.border : borderActive};\n            }\n\n            .select.active.icon,\n            .select:hover .icon {\n              color: ${disabled ? theme.palette.accents_5 : borderActive};\n            }\n\n            .value {\n              display: inline-flex;\n              flex: 1;\n              height: 100%;\n              align-items: center;\n              line-height: 1;\n              padding: 0;\n              margin-right: 1.25em;\n              font-size: var(--select-font-size);\n              color: ${disabled ? theme.palette.accents_4 : theme.palette.foreground};\n              width: calc(100% - 1.25em);\n            }\n\n            .value > :global(div),\n            .value > :global(div:hover) {\n              border-radius: 0;\n              background-color: transparent;\n              padding: 0;\n              margin: 0;\n              color: inherit;\n            }\n\n            .placeholder {\n              color: ${placeholderColor};\n            }\n\n            .icon {\n              position: absolute;\n              right: ${theme.layout.gapQuarter};\n              font-size: var(--select-font-size);\n              top: 50%;\n              bottom: 0;\n              transform: translateY(-50%) rotate(${visible ? '180' : '0'}deg);\n              pointer-events: none;\n              transition: transform 200ms ease;\n              display: flex;\n              align-items: center;\n              color: ${iconBorder};\n            }\n          `}</style>\n        </div>\n      </SelectContext.Provider>\n    )\n  },\n)\n\nSelectComponent.defaultProps = defaultProps\nSelectComponent.displayName = 'GeistSelect'\nconst Select = withScale(SelectComponent)\nexport default Select\n"
  },
  {
    "path": "components/select/styles.ts",
    "content": "import { NormalTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\n\nexport type SelectColor = {\n  border: string\n  borderActive: string\n  iconBorder: string\n  placeholderColor: string\n}\n\nexport const getColors = (\n  palette: GeistUIThemesPalette,\n  status?: NormalTypes,\n): SelectColor => {\n  const colors: { [key in NormalTypes]: SelectColor } = {\n    default: {\n      border: palette.border,\n      borderActive: palette.foreground,\n      iconBorder: palette.accents_5,\n      placeholderColor: palette.accents_3,\n    },\n    secondary: {\n      border: palette.border,\n      borderActive: palette.foreground,\n      iconBorder: palette.accents_5,\n      placeholderColor: palette.accents_3,\n    },\n    success: {\n      border: palette.successLight,\n      borderActive: palette.successDark,\n      iconBorder: palette.success,\n      placeholderColor: palette.accents_3,\n    },\n    warning: {\n      border: palette.warningLight,\n      borderActive: palette.warningDark,\n      iconBorder: palette.warning,\n      placeholderColor: palette.accents_3,\n    },\n    error: {\n      border: palette.errorLight,\n      borderActive: palette.errorDark,\n      iconBorder: palette.error,\n      placeholderColor: palette.error,\n    },\n  }\n\n  if (!status) return colors.default\n  return colors[status]\n}\n"
  },
  {
    "path": "components/shared/__tests__/__snapshots__/backdrop.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Backdrop should render correctly 1`] = `\n\"<div class=\\\\\"backdrop  backdrop-wrapper-enter\\\\\"><div class=\\\\\"layer\\\\\"></div><div class=\\\\\"position\\\\\"><span>test-value</span></div><style>\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: undefined;\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: 0.25;\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: 0.25;\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          </style></div>\"\n`;\n"
  },
  {
    "path": "components/shared/__tests__/__snapshots__/dropdown.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Dropdown should render correctly 1`] = `\"<div></div>\"`;\n"
  },
  {
    "path": "components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Ellipsis should render correctly 1`] = `\n\"<div style=\\\\\"width: 1px;\\\\\"><span>text<style>\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: 10px;\n          min-width: 0;\n        }\n      </style></span></div>\"\n`;\n"
  },
  {
    "path": "components/shared/__tests__/__snapshots__/transition.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`CssTransition should render correctly 1`] = `\"<span class=\\\\\"undefined  transition-enter\\\\\">test</span>\"`;\n"
  },
  {
    "path": "components/shared/__tests__/backdrop.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport Backdrop from '../backdrop'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\ndescribe('Backdrop', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Backdrop visible>\n        <span>test-value</span>\n      </Backdrop>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be shown or hidden by prop', async () => {\n    const wrapper = mount(\n      <Backdrop>\n        <span>test-value</span>\n      </Backdrop>,\n    )\n    expect(wrapper.find('.backdrop').length).toBe(0)\n    wrapper.setProps({ visible: true })\n    await updateWrapper(wrapper, 350)\n    expect(wrapper.find('.backdrop').length).not.toBe(0)\n  })\n\n  it('background click events should be captured', () => {\n    const handler = jest.fn()\n    const wrapper = mount(\n      <Backdrop onClick={handler} visible>\n        <span>test-value</span>\n      </Backdrop>,\n    )\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    expect(handler).toHaveBeenCalled()\n    handler.mockRestore()\n  })\n\n  it('should be no error when handler missing', () => {\n    const wrapper = mount(\n      <Backdrop visible>\n        <span>test-value</span>\n      </Backdrop>,\n    )\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be pass event from the container', () => {\n    const handler = jest.fn()\n    const wrapper = mount(\n      <Backdrop visible onContentClick={handler}>\n        <span>test-value</span>\n      </Backdrop>,\n    )\n    wrapper.find('.position').simulate('click', nativeEvent)\n    expect(handler).toHaveBeenCalled()\n    handler.mockRestore()\n  })\n\n  it('backdrop handler should ignore click events from content', async () => {\n    const handler = jest.fn()\n    const wrapper = mount(\n      <Backdrop visible onClick={handler}>\n        <span>test-value</span>\n      </Backdrop>,\n    )\n\n    /**\n     * In simulation,`mousedown` and `mouseup`not directly triiger `click` event,\n     * the click event below is just for simulation.\n     */\n    wrapper.find('.position').simulate('mousedown')\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    wrapper.find('.backdrop').simulate('mouseup')\n    await updateWrapper(wrapper)\n    expect(handler).not.toHaveBeenCalled()\n\n    wrapper.find('.backdrop').simulate('mousedown')\n    wrapper.find('.backdrop').simulate('click', nativeEvent)\n    wrapper.find('.backdrop').simulate('mouseup')\n    await updateWrapper(wrapper)\n    expect(handler).toHaveBeenCalled()\n  })\n})\n"
  },
  {
    "path": "components/shared/__tests__/dropdown.test.tsx",
    "content": "import React, { useRef } from 'react'\nimport { mount } from 'enzyme'\nimport Dropdown from '../dropdown'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport { act } from 'react-dom/test-utils'\n\nconst simulateGlobalClick = () => {\n  document.body.dispatchEvent(\n    new MouseEvent('click', {\n      view: window,\n      bubbles: true,\n      cancelable: true,\n    }),\n  )\n}\n\ndescribe('Dropdown', () => {\n  beforeAll(() => {\n    window.Element.prototype.getBoundingClientRect = () =>\n      ({\n        width: 100,\n        left: 0,\n        right: 100,\n        top: 0,\n        bottom: 100,\n        height: 100,\n        x: 0,\n      } as DOMRect)\n  })\n\n  it('should render correctly', async () => {\n    const Mock: React.FC<{ visible?: boolean }> = ({ visible = false }) => {\n      const ref = useRef<HTMLDivElement>(null)\n      return (\n        <div ref={ref}>\n          <Dropdown parent={ref} visible={visible}>\n            <span>test-value</span>\n          </Dropdown>\n        </div>\n      )\n    }\n    const wrapper = mount(<Mock />)\n    wrapper.setProps({ visible: true })\n    await updateWrapper(wrapper, 300)\n\n    expect(wrapper.find('.dropdown').html()).toContain('test-value')\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be work without parent', () => {\n    const wrapper = mount(\n      <Dropdown visible>\n        <span>test-value</span>\n      </Dropdown>,\n    )\n\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('events should be prevented', () => {\n    const handler = jest.fn()\n    const Mock: React.FC<unknown> = () => {\n      const ref = useRef<HTMLDivElement>(null)\n      return (\n        <div ref={ref} onClick={handler}>\n          <Dropdown parent={ref} visible>\n            <span>test-value</span>\n          </Dropdown>\n        </div>\n      )\n    }\n    const wrapper = mount(<Mock />)\n    wrapper.find('.dropdown').simulate('click', nativeEvent)\n\n    expect(handler).not.toHaveBeenCalled()\n    expect(() => wrapper.unmount()).not.toThrow()\n    handler.mockRestore()\n  })\n\n  it('should trigger rect update', async () => {\n    let dynamicTopMock = 100,\n      calledTimes = 0\n    window.Element.prototype.getBoundingClientRect = () => {\n      calledTimes++\n      return {\n        width: 100,\n        left: 0,\n        right: 100,\n        top: 0,\n        bottom: dynamicTopMock,\n        height: 100,\n        x: 0,\n      } as DOMRect\n    }\n    const Mock: React.FC<unknown> = () => {\n      const ref = useRef<HTMLDivElement>(null)\n      return (\n        <div ref={ref}>\n          <Dropdown parent={ref} visible>\n            <span>test-value</span>\n          </Dropdown>\n        </div>\n      )\n    }\n    const wrapper = mount(<Mock />)\n    expect(calledTimes).toBe(1)\n\n    // Do not render if position is not updated\n    act(() => simulateGlobalClick())\n    expect(calledTimes).toBe(2)\n    await updateWrapper(wrapper, 50)\n\n    // Trigger position diff first, then trigger the update\n    // Get Rect twice total\n    act(() => {\n      dynamicTopMock++\n      simulateGlobalClick()\n    })\n    expect(calledTimes).toBeGreaterThanOrEqual(4)\n\n    act(() => {\n      dynamicTopMock++\n      window.dispatchEvent(new Event('resize'))\n    })\n    expect(calledTimes).toBeGreaterThanOrEqual(5)\n\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should tigger rect update when mouseenter', () => {\n    let calledTimes = 0\n    window.Element.prototype.getBoundingClientRect = () => {\n      calledTimes++\n      return {\n        width: 100,\n        left: 0,\n        right: 100,\n        top: 0,\n        bottom: 100,\n        height: 100,\n        x: 0,\n      } as DOMRect\n    }\n    const Mock: React.FC<unknown> = () => {\n      const ref = useRef<HTMLDivElement>(null)\n      return (\n        <div ref={ref} id=\"parent\">\n          <Dropdown parent={ref} visible>\n            <span>test-value</span>\n          </Dropdown>\n        </div>\n      )\n    }\n    const wrapper = mount(<Mock />)\n    expect(calledTimes).toBe(1)\n\n    // MouseEnter event is monitored by native API, the simulate can not trigger it.\n    const parent = wrapper.find('#parent').getDOMNode() as HTMLDivElement\n    act(() => {\n      parent.dispatchEvent(new Event('mouseenter'))\n    })\n    expect(calledTimes).toBe(2)\n\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render to specified container', () => {\n    const Mock: React.FC<unknown> = () => {\n      const ref = useRef<HTMLDivElement>(null)\n      const customContainer = useRef<HTMLDivElement>(null)\n      return (\n        <div>\n          <div ref={customContainer} id=\"custom\" />\n          <div ref={ref}>\n            <Dropdown\n              parent={ref}\n              visible\n              getPopupContainer={() => customContainer.current}>\n              <span>test-value</span>\n            </Dropdown>\n          </div>\n        </div>\n      )\n    }\n    const wrapper = mount(<Mock />)\n    const customContainer = wrapper.find('#custom')\n    expect(customContainer.html()).toContain('dropdown')\n  })\n})\n"
  },
  {
    "path": "components/shared/__tests__/ellipsis.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport Ellipsis from '../ellipsis'\n\ndescribe('Ellipsis', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <div style={{ width: '1px' }}>\n        <Ellipsis height=\"10px\">text</Ellipsis>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/shared/__tests__/transition.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport CssTransition from '../css-transition'\nimport { updateWrapper } from 'tests/utils'\n\ndescribe('CssTransition', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <CssTransition visible>\n        <span>test</span>\n      </CssTransition>,\n    )\n    expect(wrapper.text()).toContain('test')\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work correctly with time props', async () => {\n    const wrapper = mount(\n      <CssTransition enterTime={300} leaveTime={300}>\n        <span id=\"test\">test</span>\n      </CssTransition>,\n    )\n    expect(wrapper.find('.transition-enter-active').length).toBe(0)\n\n    wrapper.setProps({ visible: true })\n    await updateWrapper(wrapper, 310)\n    expect(wrapper.find('.transition-enter-active').length).not.toBe(0)\n\n    wrapper.setProps({ visible: false })\n    await updateWrapper(wrapper, 310)\n    expect(wrapper.find('.transition-leave-active').length).not.toBe(0)\n  })\n\n  it('should clear css-transition classes after hidden', async () => {\n    const wrapper = mount(\n      <CssTransition visible>\n        <span>test</span>\n      </CssTransition>,\n    )\n    // don't remove classes after shown\n    await updateWrapper(wrapper, 60)\n    expect(wrapper.find('.transition-enter-active').length).not.toBe(0)\n\n    await updateWrapper(wrapper, 150)\n    expect(wrapper.find('.transition-enter-active').length).not.toBe(0)\n\n    // remove classes after hidden\n    wrapper.setProps({ visible: false })\n    await updateWrapper(wrapper, 60)\n    expect(wrapper.find('.transition-leave-active').length).not.toBe(0)\n\n    await updateWrapper(wrapper, 150)\n    expect(wrapper.find('.transition-leave-active').length).toBe(0)\n    expect(wrapper.find('.transition-enter-active').length).toBe(0)\n  })\n\n  it('custom class names should be rendered', async () => {\n    const wrapper = mount(\n      <CssTransition name=\"test\">\n        <span id=\"test\">test</span>\n      </CssTransition>,\n    )\n\n    expect(wrapper.find('.test-enter-active').length).toBe(0)\n\n    wrapper.setProps({ visible: true })\n    await updateWrapper(wrapper, 60)\n    expect(wrapper.find('.test-enter-active').length).not.toBe(0)\n\n    wrapper.setProps({ visible: false })\n    await updateWrapper(wrapper, 60)\n    expect(wrapper.find('.test-leave-active').length).not.toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/shared/backdrop.tsx",
    "content": "import React, { MouseEvent } from 'react'\nimport useTheme from '../use-theme'\nimport CssTransition from './css-transition'\nimport useCurrentState from '../utils/use-current-state'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  onClick?: (event: MouseEvent<HTMLElement>) => void\n  visible?: boolean\n  width?: string\n  onContentClick?: (event: MouseEvent<HTMLElement>) => void\n  backdropClassName?: string\n  positionClassName?: string\n  layerClassName?: string\n}\n\nconst defaultProps = {\n  onClick: () => {},\n  visible: false,\n  onContentClick: () => {},\n  backdropClassName: '',\n  positionClassName: '',\n  layerClassName: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type BackdropProps = Props & NativeAttrs\n\nconst Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(\n  ({\n    children,\n    onClick,\n    visible,\n    width,\n    onContentClick,\n    backdropClassName,\n    positionClassName,\n    layerClassName,\n    ...props\n  }: React.PropsWithChildren<BackdropProps> & typeof defaultProps) => {\n    const theme = useTheme()\n    const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false)\n    const clickHandler = (event: MouseEvent<HTMLElement>) => {\n      if (IsContentMouseDownRef.current) return\n      onClick && onClick(event)\n    }\n    const mouseUpHandler = () => {\n      if (!IsContentMouseDownRef.current) return\n      const timer = setTimeout(() => {\n        setIsContentMouseDown(false)\n        clearTimeout(timer)\n      }, 0)\n    }\n\n    return (\n      <CssTransition name=\"backdrop-wrapper\" visible={visible} clearTime={300}>\n        <div\n          className={useClasses('backdrop', backdropClassName)}\n          onClick={clickHandler}\n          onMouseUp={mouseUpHandler}\n          {...props}>\n          <div className={useClasses('layer', layerClassName)} />\n          <div\n            onClick={onContentClick}\n            className={useClasses('position', positionClassName)}\n            onMouseDown={() => setIsContentMouseDown(true)}>\n            {children}\n          </div>\n          <style jsx>{`\n            .backdrop {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              overflow: auto;\n              z-index: 1000;\n              -webkit-overflow-scrolling: touch;\n              box-sizing: border-box;\n              text-align: center;\n            }\n            .position {\n              position: relative;\n              z-index: 1001;\n              outline: none;\n              max-width: 90%;\n              width: ${width};\n              margin: 20px auto;\n              vertical-align: middle;\n              display: inline-block;\n            }\n            .backdrop:before {\n              display: inline-block;\n              width: 0;\n              height: 100%;\n              vertical-align: middle;\n              content: '';\n            }\n            .layer {\n              position: fixed;\n              top: 0;\n              left: 0;\n              right: 0;\n              bottom: 0;\n              width: 100%;\n              height: 100%;\n              opacity: ${theme.expressiveness.portalOpacity};\n              background-color: black;\n              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n              pointer-events: none;\n              z-index: 1000;\n            }\n            .backdrop-wrapper-enter .layer {\n              opacity: 0;\n            }\n            .backdrop-wrapper-enter-active .layer {\n              opacity: ${theme.expressiveness.portalOpacity};\n            }\n            .backdrop-wrapper-leave .layer {\n              opacity: ${theme.expressiveness.portalOpacity};\n            }\n            .backdrop-wrapper-leave-active .layer {\n              opacity: 0;\n            }\n          `}</style>\n        </div>\n      </CssTransition>\n    )\n  },\n)\n\nBackdrop.defaultProps = defaultProps\nBackdrop.displayName = 'GeistBackdrop'\nexport default Backdrop\n"
  },
  {
    "path": "components/shared/css-transition.tsx",
    "content": "import React, { useEffect, useState } from 'react'\n\ninterface Props {\n  visible?: boolean\n  enterTime?: number\n  leaveTime?: number\n  clearTime?: number\n  className?: string\n  name?: string\n}\n\nconst defaultProps = {\n  visible: false,\n  enterTime: 60,\n  leaveTime: 60,\n  clearTime: 60,\n  className: '',\n  name: 'transition',\n}\n\nexport type CssTransitionProps = Props\n\nconst CssTransition: React.FC<React.PropsWithChildren<CssTransitionProps>> = ({\n  children,\n  className,\n  visible,\n  enterTime,\n  leaveTime,\n  clearTime,\n  name,\n  ...props\n}: React.PropsWithChildren<CssTransitionProps> & typeof defaultProps) => {\n  const [classes, setClasses] = useState<string>('')\n  const [renderable, setRenderable] = useState<boolean>(visible)\n\n  useEffect(() => {\n    const statusClassName = visible ? 'enter' : 'leave'\n    const time = visible ? enterTime : leaveTime\n    if (visible && !renderable) {\n      setRenderable(true)\n    }\n\n    setClasses(`${name}-${statusClassName}`)\n\n    // set class to active\n    const timer = setTimeout(() => {\n      setClasses(`${name}-${statusClassName} ${name}-${statusClassName}-active`)\n      clearTimeout(timer)\n    }, time)\n\n    // remove classess when animation over\n    const clearClassesTimer = setTimeout(() => {\n      if (!visible) {\n        setClasses('')\n        setRenderable(false)\n      }\n      clearTimeout(clearClassesTimer)\n    }, time + clearTime)\n\n    return () => {\n      clearTimeout(timer)\n      clearTimeout(clearClassesTimer)\n    }\n  }, [visible, renderable])\n  if (!React.isValidElement(children) || !renderable) return null\n\n  return React.cloneElement(children, {\n    ...props,\n    className: `${children.props.className} ${className} ${classes}`,\n  })\n}\n\nCssTransition.defaultProps = defaultProps\nCssTransition.displayName = 'GeistCssTransition'\nexport default CssTransition\n"
  },
  {
    "path": "components/shared/dropdown.tsx",
    "content": "import React, { MutableRefObject, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport usePortal from '../utils/use-portal'\nimport useResize from '../utils/use-resize'\nimport CssTransition from './css-transition'\nimport useClickAnyWhere from '../utils/use-click-anywhere'\nimport useDOMObserver from '../utils/use-dom-observer'\nimport useWarning from '../utils/use-warning'\nimport { getRefRect } from '../utils/layouts'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  parent?: MutableRefObject<HTMLElement | null> | undefined\n  visible: boolean\n  disableMatchWidth?: boolean\n  getPopupContainer?: () => HTMLElement | null\n}\n\ninterface ReactiveDomReact {\n  top: number\n  left: number\n  right: number\n  width: number\n}\n\nconst defaultRect: ReactiveDomReact = {\n  top: -1000,\n  left: -1000,\n  right: -1000,\n  width: 0,\n}\n\nconst Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(\n  ({ children, parent, visible, disableMatchWidth, getPopupContainer }) => {\n    const el = usePortal('dropdown', getPopupContainer)\n    const [rect, setRect] = useState<ReactiveDomReact>(defaultRect)\n    const classes = useClasses(\n      'dropdown',\n      disableMatchWidth ? 'disable-match' : 'width-match',\n    )\n\n    if (!parent) return null\n\n    /* istanbul ignore next */\n    if (process.env.NODE_ENV !== 'production') {\n      if (getPopupContainer && getPopupContainer()) {\n        const el = getPopupContainer()\n        const style = window.getComputedStyle(el as HTMLDivElement)\n        if (style.position === 'static') {\n          useWarning(\n            'The element specified by \"getPopupContainer\" must have \"position\" set.',\n          )\n        }\n      }\n    }\n\n    const updateRect = () => {\n      const {\n        top,\n        left,\n        right,\n        width: nativeWidth,\n      } = getRefRect(parent, getPopupContainer)\n      setRect({ top, left, right, width: nativeWidth })\n    }\n\n    useResize(updateRect)\n    useClickAnyWhere(() => {\n      const { top, left } = getRefRect(parent, getPopupContainer)\n      const shouldUpdatePosition = top !== rect.top || left !== rect.left\n      if (!shouldUpdatePosition) return\n      updateRect()\n    })\n    useDOMObserver(parent, () => {\n      updateRect()\n    })\n    useEffect(() => {\n      if (!parent || !parent.current) return\n      parent.current.addEventListener('mouseenter', updateRect)\n      /* istanbul ignore next */\n      return () => {\n        if (!parent || !parent.current) return\n        parent.current.removeEventListener('mouseenter', updateRect)\n      }\n    }, [parent])\n\n    const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n      event.stopPropagation()\n      event.nativeEvent.stopImmediatePropagation()\n      event.preventDefault()\n    }\n    const mouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault()\n    }\n\n    if (!el) return null\n    return createPortal(\n      <CssTransition visible={visible}>\n        <div className={classes} onClick={clickHandler} onMouseDown={mouseDownHandler}>\n          {children}\n          <style jsx>{`\n            .dropdown {\n              position: absolute;\n              top: ${rect.top + 2}px;\n              left: ${rect.left}px;\n              z-index: 1100;\n            }\n            .width-match {\n              width: ${rect.width}px;\n            }\n            .disable-match {\n              min-width: ${rect.width}px;\n            }\n          `}</style>\n        </div>\n      </CssTransition>,\n      el,\n    )\n  },\n)\n\nexport default Dropdown\n"
  },
  {
    "path": "components/shared/ellipsis.tsx",
    "content": "import React from 'react'\n\nexport type EllipsisProps = {\n  height: string\n}\n\nconst Ellipsis: React.FC<React.PropsWithChildren<EllipsisProps>> = ({\n  children,\n  height,\n}) => {\n  return (\n    <span>\n      {children}\n      <style jsx>{`\n        span {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          line-height: ${height};\n          min-width: 0;\n        }\n      `}</style>\n    </span>\n  )\n}\n\nexport default React.memo(Ellipsis)\n"
  },
  {
    "path": "components/shared/expand.tsx",
    "content": "import React, { useEffect, useRef, useState } from 'react'\nimport useRealShape from '../utils/use-real-shape'\nimport useClasses from '../use-classes'\n\nexport type ExpandProps = {\n  isExpanded?: boolean\n  delay?: number\n}\n\nconst defaultProps = {\n  isExpanded: false,\n  delay: 200,\n}\n\nconst Expand: React.FC<React.PropsWithChildren<ExpandProps>> = ({\n  isExpanded,\n  delay,\n  children,\n}: React.PropsWithChildren<ExpandProps> & typeof defaultProps) => {\n  const [height, setHeight] = useState<string>(isExpanded ? 'auto' : '0')\n  const [selfExpanded, setSelfExpanded] = useState<boolean>(isExpanded)\n  const [visible, setVisible] = useState<boolean>(isExpanded)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const entryTimer = useRef<number>()\n  const leaveTimer = useRef<number>()\n  const resetTimer = useRef<number>()\n  const [state, updateShape] = useRealShape<HTMLDivElement>(contentRef)\n  const classes = useClasses('container', { expanded: selfExpanded })\n\n  useEffect(() => setHeight(`${state.height}px`), [state.height])\n  useEffect(() => {\n    // show element or reset height.\n    // force an update once manually, even if the element does not change.\n    // (the height of the element might be \"auto\")\n    if (isExpanded) {\n      setVisible(isExpanded)\n    } else {\n      updateShape()\n      setHeight(`${state.height}px`)\n    }\n\n    // show expand animation\n    entryTimer.current = window.setTimeout(() => {\n      setSelfExpanded(isExpanded)\n      clearTimeout(entryTimer.current)\n    }, 30)\n\n    // Reset height after animation\n    if (isExpanded) {\n      resetTimer.current = window.setTimeout(() => {\n        setHeight('auto')\n        clearTimeout(resetTimer.current)\n      }, delay)\n    } else {\n      leaveTimer.current = window.setTimeout(() => {\n        setVisible(isExpanded)\n        clearTimeout(leaveTimer.current)\n      }, delay / 2)\n    }\n\n    return () => {\n      clearTimeout(entryTimer.current)\n      clearTimeout(leaveTimer.current)\n      clearTimeout(resetTimer.current)\n    }\n  }, [isExpanded])\n\n  return (\n    <div className={classes}>\n      <div ref={contentRef} className=\"content\">\n        {children}\n      </div>\n      <style jsx>{`\n        .container {\n          padding: 0;\n          margin: 0;\n          height: 0;\n          overflow: hidden;\n          visibility: ${visible ? 'visible' : 'hidden'};\n          transition: height ${delay}ms ease;\n        }\n\n        .expanded {\n          height: ${height};\n          visibility: visible;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nExpand.defaultProps = defaultProps\nExpand.displayName = 'GeistExpand'\nexport default Expand\n"
  },
  {
    "path": "components/shared/highlight.tsx",
    "content": "import React, { useMemo, useRef } from 'react'\nimport { isUnplacedRect, ReactiveDomReact } from '../utils/layouts'\nimport usePrevious from '../utils/use-previous'\nimport useTheme from '../use-theme'\nimport useClasses from '../use-classes'\n\ntype Props = {\n  rect: ReactiveDomReact\n  visible?: boolean\n  hoverHeightRatio?: number\n  hoverWidthRatio?: number\n  activeOpacity?: number\n}\n\ntype HighlightPosition = {\n  width: string\n  left: string\n  height: string\n  top: string\n  transition: string\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type HighlightProps = Props & NativeAttrs\n\nconst Highlight: React.FC<HighlightProps> = ({\n  rect,\n  visible,\n  hoverHeightRatio = 1,\n  hoverWidthRatio = 1,\n  activeOpacity = 0.8,\n  className,\n  ...props\n}) => {\n  const theme = useTheme()\n  const ref = useRef<HTMLDivElement | null>(null)\n  const isFirstVisible = usePrevious<boolean>(isUnplacedRect(rect))\n  const position = useMemo<HighlightPosition>(() => {\n    const width = rect.width * hoverWidthRatio\n    const height = rect.height * hoverHeightRatio\n    return {\n      width: `${width}px`,\n      left: `${rect.left + (rect.width - width) / 2}px`,\n      height: `${height}px`,\n      top: `${rect.elementTop + (rect.height - height) / 2}px`,\n      transition: isFirstVisible ? 'opacity' : 'opacity, width, left, top',\n    }\n  }, [rect, hoverWidthRatio, hoverHeightRatio])\n\n  return (\n    <div ref={ref} className={useClasses('highlight', className)} {...props}>\n      <style jsx>{`\n        .highlight {\n          background: ${theme.palette.accents_2};\n          position: absolute;\n          border-radius: 5px;\n          width: ${position.width};\n          left: ${position.left};\n          height: ${position.height};\n          top: ${position.top};\n          opacity: ${visible ? activeOpacity : 0};\n          transition: 0.15s ease;\n          transition-property: ${position.transition};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Highlight\n"
  },
  {
    "path": "components/slider/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Slider should render correctly 1`] = `\n\"<div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\">20<style>\n          .dot {\n            position: absolute;\n            left: 20%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #111;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div>\"\n`;\n\nexports[`Slider should work with different status 1`] = `\n\"<div><div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\">0<style>\n          .dot {\n            position: absolute;\n            left: 0%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #111;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div><div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\">0<style>\n          .dot {\n            position: absolute;\n            left: 0%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #0070f3;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div><div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\">0<style>\n          .dot {\n            position: absolute;\n            left: 0%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #f5a623;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div><div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\">0<style>\n          .dot {\n            position: absolute;\n            left: 0%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #e00;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div></div>\"\n`;\n\nexports[`Slider should work with hideValue 1`] = `\n\"<div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\"><style>\n          .dot {\n            position: absolute;\n            left: 20%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #111;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div>\"\n`;\n\nexports[`Slider should work with markers 1`] = `\n\"<div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\">0<style>\n          .dot {\n            position: absolute;\n            left: 0%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><span style=\\\\\"left: 10%;\\\\\"></span><span style=\\\\\"left: 20%;\\\\\"></span><span style=\\\\\"left: 30%;\\\\\"></span><span style=\\\\\"left: 40%;\\\\\"></span><span style=\\\\\"left: 50%;\\\\\"></span><span style=\\\\\"left: 60%;\\\\\"></span><span style=\\\\\"left: 70%;\\\\\"></span><span style=\\\\\"left: 80%;\\\\\"></span><span style=\\\\\"left: 90%;\\\\\"></span><style>\n        span {\n          position: absolute;\n          width: 2px;\n          height: 100%;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          background-color: #fff;\n        }\n      </style><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #111;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div>\"\n`;\n\nexports[`Slider should work with markers 2`] = `\n\"<div class=\\\\\"slider\\\\\"><div class=\\\\\"dot\\\\\">0<style>\n          .dot {\n            position: absolute;\n            left: 0%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: #0070f3;\n            color: #fff;\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: #eaeaea;\n            color: #888;\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        </style></div><span style=\\\\\"left: 20%;\\\\\"></span><span style=\\\\\"left: 40%;\\\\\"></span><span style=\\\\\"left: 60%;\\\\\"></span><span style=\\\\\"left: 80%;\\\\\"></span><style>\n        span {\n          position: absolute;\n          width: 2px;\n          height: 100%;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          background-color: #fff;\n        }\n      </style><style>\n        .slider {\n          border-radius: 50px;\n          background-color: #111;\n          position: relative;\n          cursor: pointer;\n          --slider-font-size: calc(1 * 16px);\n          width: 100%;\n          height: calc(0.5 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></div>\"\n`;\n"
  },
  {
    "path": "components/slider/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Slider } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport { act } from 'react-dom/test-utils'\n\nconst triggerDrag = (el: HTMLElement, x = 0) => {\n  window.Element.prototype.getBoundingClientRect = () =>\n    ({\n      width: 100,\n      left: 0,\n      right: 100,\n      x: 0,\n    } as DOMRect)\n  const mousedown = new MouseEvent('mousedown')\n  const mousemove = new MouseEvent('mousemove', {\n    clientX: x,\n  })\n  const mouseup = new MouseEvent('mouseup')\n  el.dispatchEvent(mousedown)\n  window.dispatchEvent(mousemove)\n  window.dispatchEvent(mouseup)\n}\n\ndescribe('Slider', () => {\n  beforeAll(() => {\n    window.Element.prototype.getBoundingClientRect = () =>\n      ({\n        x: 0,\n        y: 0,\n        width: 100,\n        height: 10,\n        top: 0,\n        bottom: 10,\n        left: 0,\n        right: 100,\n      } as DOMRect)\n  })\n\n  it('should render correctly', () => {\n    const wrapper = mount(<Slider initialValue={20} />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should trigger events when click', async () => {\n    let value = 0\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(<Slider initialValue={20} onChange={changeHandler} />)\n    wrapper.find('.slider').simulate('click', {\n      ...nativeEvent,\n      clientX: 50,\n    })\n    await updateWrapper(wrapper, 350)\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual(50)\n    changeHandler.mockRestore()\n  })\n\n  it('should trigger events when drag', async () => {\n    let value = 0\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(<Slider initialValue={0} onChange={changeHandler} />)\n    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement\n\n    act(() => triggerDrag(dot, 50))\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual(50)\n    changeHandler.mockRestore()\n  })\n\n  it('should work with different status', () => {\n    const wrapper = mount(\n      <div>\n        <Slider type=\"secondary\" />\n        <Slider type=\"success\" />\n        <Slider type=\"warning\" />\n        <Slider type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('should ignore events when disabled', async () => {\n    let value = 0\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(<Slider initialValue={0} disabled onChange={changeHandler} />)\n    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement\n\n    act(() => triggerDrag(dot, 50))\n    expect(changeHandler).not.toHaveBeenCalled()\n    expect(value).not.toEqual(50)\n\n    wrapper.find('.slider').simulate('click', {\n      ...nativeEvent,\n      clientX: 50,\n    })\n    await updateWrapper(wrapper, 350)\n    expect(changeHandler).not.toHaveBeenCalled()\n    expect(value).not.toEqual(50)\n    changeHandler.mockRestore()\n  })\n\n  it('should move unit length is step', async () => {\n    let value = 0\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(<Slider step={10} onChange={changeHandler} />)\n    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement\n\n    act(() => triggerDrag(dot, 6))\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual(10)\n    changeHandler.mockRestore()\n  })\n\n  it('should return the specified when the limit is exceeded', () => {\n    let value = 0\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(<Slider min={10} max={20} onChange={changeHandler} />)\n    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement\n\n    act(() => triggerDrag(dot, -5))\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual(10)\n\n    act(() => triggerDrag(dot, 101))\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toEqual(20)\n\n    changeHandler.mockRestore()\n  })\n\n  it('should render number in dot', () => {\n    let wrapper = mount(<Slider initialValue={20} />)\n    expect(wrapper.find('.dot').text()).toContain('20')\n\n    wrapper = mount(<Slider value={50} />)\n    expect(wrapper.find('.dot').text()).toContain('50')\n  })\n\n  it('should work with markers', () => {\n    let wrapper = mount(<Slider step={10} showMarkers />)\n    expect(wrapper.html()).toMatchSnapshot()\n\n    wrapper = mount(<Slider step={20} showMarkers />)\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n  it('should work with hideValue', () => {\n    let wrapper = mount(<Slider initialValue={20} hideValue />)\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "components/slider/index.ts",
    "content": "import Slider from './slider'\n\nexport type { SliderProps, SliderTypes } from './slider'\nexport default Slider\n"
  },
  {
    "path": "components/slider/slider-dot.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  left: number\n  disabled?: boolean\n  isClick?: boolean\n}\n\nconst defaultProps = {\n  left: 0,\n  disabled: false,\n  isClick: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SliderDotProps = Props & NativeAttrs\n\nconst SliderDot = React.forwardRef<\n  HTMLDivElement,\n  React.PropsWithChildren<SliderDotProps>\n>(\n  (\n    {\n      children,\n      disabled,\n      left,\n      isClick,\n    }: React.PropsWithChildren<SliderDotProps> & typeof defaultProps,\n    ref: React.Ref<HTMLDivElement>,\n  ) => {\n    const theme = useTheme()\n    const classes = useClasses('dot', { disabled, click: isClick })\n\n    return (\n      <div className={classes} ref={ref}>\n        {children}\n        <style jsx>{`\n          .dot {\n            position: absolute;\n            left: ${left}%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            height: calc(var(--slider-font-size) * 1.25);\n            min-width: calc(var(--slider-font-size) * 1.25);\n            line-height: calc(var(--slider-font-size) * 1.25);\n            border-radius: calc(var(--slider-font-size) * 0.625);\n            user-select: none;\n            font-weight: 700;\n            font-size: calc(var(--slider-font-size) * 0.75);\n            z-index: 100;\n            background-color: ${theme.palette.success};\n            color: ${theme.palette.background};\n            text-align: center;\n            padding: 0 calc(0.57 * var(--slider-font-size));\n          }\n\n          .dot.disabled {\n            cursor: not-allowed !important;\n            background-color: ${theme.palette.accents_2};\n            color: ${theme.palette.accents_4};\n          }\n\n          .dot.click {\n            transition: all 200ms ease;\n          }\n\n          .dot:hover {\n            cursor: grab;\n          }\n\n          .dot:active {\n            cursor: grabbing;\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nSliderDot.defaultProps = defaultProps\nSliderDot.displayName = 'GeistSliderDot'\nexport default SliderDot\n"
  },
  {
    "path": "components/slider/slider-mark.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\n\ninterface Props {\n  max: number\n  min: number\n  step: number\n}\n\nexport type MarkLeftValue = number\n\nexport type Marks = Array<MarkLeftValue>\n\nconst getMarks = (min: number, max: number, step: number): Marks => {\n  const value = max - min\n  const roundFunc = !(value % step) ? Math.floor : Math.ceil\n  const count = roundFunc(value / step) - 1\n  if (count >= 99) return []\n\n  return [...new Array(count)].map((_, index) => (step * (index + 1) * 100) / value)\n}\n\nconst SliderMark: React.FC<React.PropsWithChildren<Props>> = ({ step, max, min }) => {\n  const theme = useTheme()\n  const marks = useMemo(() => getMarks(min, max, step), [min, max, step])\n\n  return (\n    <>\n      {marks.map((val, index) => (\n        <span key={`${val}-${index}`} style={{ left: `${val}%` }} />\n      ))}\n      <style jsx>{`\n        span {\n          position: absolute;\n          width: 2px;\n          height: 100%;\n          top: 50%;\n          transform: translate(-50%, -50%);\n          background-color: ${theme.palette.background};\n        }\n      `}</style>\n    </>\n  )\n}\n\nexport default SliderMark\n"
  },
  {
    "path": "components/slider/slider.tsx",
    "content": "import React, {\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport useTheme from '../use-theme'\nimport useDrag, { DraggingEvent } from '../utils/use-drag'\nimport useCurrentState from '../utils/use-current-state'\nimport SliderDot from './slider-dot'\nimport SliderMark from './slider-mark'\nimport { getColors } from './styles'\nimport { NormalTypes } from '../utils/prop-types'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type SliderTypes = NormalTypes\ninterface Props {\n  hideValue?: boolean\n  value?: number\n  type?: SliderTypes\n  initialValue?: number\n  step?: number\n  max?: number\n  min?: number\n  disabled?: boolean\n  showMarkers?: boolean\n  onChange?: (val: number) => void\n  className?: string\n}\n\nconst defaultProps = {\n  hideValue: false,\n  type: 'default' as SliderTypes,\n  initialValue: 0,\n  step: 1,\n  min: 0,\n  max: 100,\n  disabled: false,\n  showMarkers: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SliderProps = Props & NativeAttrs\n\nconst getRefWidth = (elementRef: RefObject<HTMLElement> | null): number => {\n  if (!elementRef || !elementRef.current) return 0\n  const rect = elementRef.current.getBoundingClientRect()\n  return rect.width || rect.right - rect.left\n}\n\nconst getValue = (\n  max: number,\n  min: number,\n  step: number,\n  offsetX: number,\n  railWidth: number,\n): number => {\n  if (offsetX < 0) return min\n  if (offsetX > railWidth) return max\n  const widthForEachStep = (railWidth / (max - min)) * step\n  if (widthForEachStep <= 0) return min\n\n  const slideDistance = Math.round(offsetX / widthForEachStep) * step + min\n  return Number.isInteger(slideDistance)\n    ? slideDistance\n    : Number.parseFloat(slideDistance.toFixed(1))\n}\n\nconst SliderComponent: React.FC<React.PropsWithChildren<SliderProps>> = ({\n  hideValue,\n  disabled,\n  type,\n  step,\n  max,\n  min,\n  initialValue,\n  value: customValue,\n  onChange,\n  className,\n  showMarkers,\n  ...props\n}: React.PropsWithChildren<SliderProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const [value, setValue] = useState<number>(initialValue)\n  const [, setSliderWidth, sideWidthRef] = useCurrentState<number>(0)\n  const [, setLastDargOffset, lastDargOffsetRef] = useCurrentState<number>(0)\n  const [isClick, setIsClick] = useState<boolean>(false)\n\n  const sliderRef = useRef<HTMLDivElement>(null)\n  const dotRef = useRef<HTMLDivElement>(null)\n\n  const currentRatio = useMemo(\n    () => ((value - min) / (max - min)) * 100,\n    [value, max, min],\n  )\n\n  const setLastOffsetManually = (val: number) => {\n    const width = getRefWidth(sliderRef)\n    const shouldOffset = ((val - min) / (max - min)) * width\n    setLastDargOffset(shouldOffset)\n  }\n\n  const updateValue = useCallback(\n    offset => {\n      const currentValue = getValue(max, min, step, offset, sideWidthRef.current)\n      setValue(currentValue)\n      onChange && onChange(currentValue)\n    },\n    [max, min, step, sideWidthRef],\n  )\n\n  const { bg } = useMemo(() => getColors(theme.palette, type), [theme.palette, type])\n\n  const dragHandler = (event: DraggingEvent) => {\n    if (disabled) return\n    const currentOffset = event.currentX - event.startX\n    const offset = currentOffset + lastDargOffsetRef.current\n    updateValue(offset)\n  }\n  const dragStartHandler = () => {\n    setIsClick(false)\n    setSliderWidth(getRefWidth(sliderRef))\n  }\n  const dragEndHandler = (event: DraggingEvent) => {\n    if (disabled) return\n    const offset = event.currentX - event.startX\n    const currentOffset = offset + lastDargOffsetRef.current\n    const boundOffset =\n      currentOffset < 0 ? 0 : Math.min(currentOffset, sideWidthRef.current)\n    setLastDargOffset(boundOffset)\n  }\n  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) return\n    if (!sliderRef || !sliderRef.current) return\n    setIsClick(true)\n    setSliderWidth(getRefWidth(sliderRef))\n    const clickOffset = event.clientX - sliderRef.current.getBoundingClientRect().x\n    setLastDargOffset(clickOffset)\n    updateValue(clickOffset)\n  }\n\n  useDrag(dotRef, dragHandler, dragStartHandler, dragEndHandler)\n\n  useEffect(() => {\n    if (customValue === undefined) return\n    if (customValue === value) return\n    setValue(customValue)\n  }, [customValue, value])\n\n  useEffect(() => {\n    initialValue && setLastOffsetManually(initialValue)\n  }, [])\n\n  return (\n    <div\n      className={useClasses('slider', className)}\n      onClick={clickHandler}\n      ref={sliderRef}\n      {...props}>\n      <SliderDot disabled={disabled} ref={dotRef} isClick={isClick} left={currentRatio}>\n        {hideValue || value}\n      </SliderDot>\n      {showMarkers && <SliderMark max={max} min={min} step={step} />}\n      <style jsx>{`\n        .slider {\n          border-radius: 50px;\n          background-color: ${disabled ? theme.palette.accents_2 : bg};\n          position: relative;\n          cursor: ${disabled ? 'not-allow' : 'pointer'};\n          --slider-font-size: ${SCALES.font(1)};\n          width: ${SCALES.width(1, '100%')};\n          height: ${SCALES.height(0.5)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nSliderComponent.defaultProps = defaultProps\nSliderComponent.displayName = 'GeistSlider'\nconst Slider = withScale(SliderComponent)\nexport default Slider\n"
  },
  {
    "path": "components/slider/styles.ts",
    "content": "import { GeistUIThemesPalette } from '../themes/presets'\nimport { NormalTypes } from '../utils/prop-types'\n\nexport type SelectColor = {\n  bg: string\n}\n\nexport const getColors = (\n  palette: GeistUIThemesPalette,\n  status?: NormalTypes,\n): SelectColor => {\n  const colors: { [key in NormalTypes]: SelectColor } = {\n    default: {\n      bg: palette.accents_8,\n    },\n    secondary: {\n      bg: palette.accents_8,\n    },\n    success: {\n      bg: palette.success,\n    },\n    warning: {\n      bg: palette.warning,\n    },\n    error: {\n      bg: palette.error,\n    },\n  }\n\n  if (!status) return colors.default\n  return colors[status]\n}\n"
  },
  {
    "path": "components/snippet/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Snippet should render correctly 1`] = `\n\"<div class=\\\\\"snippet\\\\\"><pre>yarn add @geist-ui/core</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: initial;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #000;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '$ ';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #fff;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: 0;\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div>\"\n`;\n\nexports[`Snippet should work with custom symbol 1`] = `\n\"<div class=\\\\\"snippet\\\\\"><pre>yarn add @geist-ui/core</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: initial;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #000;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '> ';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #fff;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: 0;\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div>\"\n`;\n\nexports[`Snippet should work with custom symbol 2`] = `\n\"<div class=\\\\\"snippet\\\\\"><pre>yarn add @geist-ui/core</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: initial;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #000;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #fff;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: 0;\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div>\"\n`;\n\nexports[`Snippet should work with different styles 1`] = `\n\"<div><div class=\\\\\"snippet\\\\\"><pre>yarn add @geist-ui/core</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: initial;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #000;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '$ ';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #fff;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: 0;\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div><div class=\\\\\"snippet\\\\\"><pre>yarn add @geist-ui/core</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: 20%;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #000;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '$ ';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #fff;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: 0;\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div><div class=\\\\\"snippet\\\\\"><pre>yarn add @geist-ui/core</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #666;\n          background-color: #fff;\n          border: 1px solid #666;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: initial;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #666;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '$ ';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #fff;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: 0;\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div><div class=\\\\\"snippet\\\\\"><pre>yarn add @geist-ui/core</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #fff;\n          background-color: #0070f3;\n          border: 1px solid #0070f3;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: initial;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #fff;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '$ ';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #0070f3;\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: 0;\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div></div>\"\n`;\n\nexports[`Snippet should work with multi-line 1`] = `\n\"<div class=\\\\\"snippet\\\\\"><pre>cd project</pre><pre>now</pre><div class=\\\\\"copy\\\\\"><svg viewBox=\\\\\"0 0 24 24\\\\\" stroke=\\\\\"currentColor\\\\\" stroke-width=\\\\\"1.5\\\\\" stroke-linecap=\\\\\"round\\\\\" stroke-linejoin=\\\\\"round\\\\\" fill=\\\\\"none\\\\\" shape-rendering=\\\\\"geometricPrecision\\\\\" style=\\\\\"color: currentcolor;\\\\\"><path d=\\\\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\\\\"></path><style>\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      </style></svg></div><style>\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: #000;\n          background-color: #fff;\n          border: 1px solid #eaeaea;\n          border-radius: 6px;\n          --snippet-font-size: calc(0.8125 * 16px);\n          --snippet-padding-top: calc(0.667 * 16px);\n          font-size: var(--snippet-font-size);\n          width: initial;\n          height: auto;\n          padding: calc(0.667 * 16px) calc(2.667 * 16px) calc(0.667 * 16px)\n            calc(0.667 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: #000;\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '$ ';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: #fff;\n          display: inline-flex;\n          justify-content: center;\n          align-items: flex-start;\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: 6px;\n          cursor: pointer;\n          user-select: none;\n          padding-top: var(--snippet-padding-top);\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      </style></div>\"\n`;\n"
  },
  {
    "path": "components/snippet/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Snippet } from 'components'\n\nconst command = 'yarn add @geist-ui/core'\nconst multiLine = ['cd project', 'now']\n\ndescribe('Snippet', () => {\n  beforeAll(() => {\n    window.getSelection = jest.fn().mockImplementation(() => ({\n      removeAllRanges: jest.fn(),\n      addRange: jest.fn(),\n    }))\n    document.createRange = jest.fn().mockImplementation(() => ({\n      selectNode: jest.fn(),\n    }))\n  })\n\n  it('should render correctly', () => {\n    const wrapper = mount(<Snippet text={command} />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with multi-line', () => {\n    const wrapper = mount(<Snippet text={multiLine} />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different styles', () => {\n    const wrapper = mount(\n      <div>\n        <Snippet text={command} filled />\n        <Snippet text={command} width=\"20%\" />\n        <Snippet text={command} type=\"secondary\" />\n        <Snippet text={command} type=\"success\" filled />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('text should be copied', () => {\n    document.execCommand = jest.fn()\n    const wrapper = mount(<Snippet text={command} />)\n    wrapper.find('.copy').simulate('click')\n    expect(document.execCommand).toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockRestore()\n  })\n\n  it('multi-line commands should be copied', () => {\n    document.execCommand = jest.fn()\n    const wrapper = mount(<Snippet text={multiLine} />)\n    wrapper.find('.copy').simulate('click')\n    expect(document.execCommand).toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockRestore()\n  })\n\n  it('child commands should be copied', () => {\n    document.execCommand = jest.fn()\n    const wrapper = mount(<Snippet>{command}</Snippet>)\n    wrapper.find('.copy').simulate('click')\n    expect(document.execCommand).toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockRestore()\n  })\n\n  it('should disable copy function', () => {\n    const wrapper = mount(<Snippet text={command} copy=\"prevent\" />)\n    expect(wrapper.find('.copy').length).toBe(0)\n  })\n\n  it('should work with custom symbol', () => {\n    const wrapper = mount(<Snippet text={command} symbol=\">\" />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n\n    const emptySymbolWrapper = mount(<Snippet text={command} symbol=\" \" />)\n    expect(emptySymbolWrapper.html()).toMatchSnapshot()\n\n    const emptySymbolWrapper2 = mount(<Snippet text={command} symbol=\"\" />)\n    expect(emptySymbolWrapper2.html()).toEqual(emptySymbolWrapper.html())\n\n    expect(() => emptySymbolWrapper.unmount()).not.toThrow()\n    expect(() => emptySymbolWrapper2.unmount()).not.toThrow()\n  })\n\n  it('should work with custom toast', () => {\n    document.execCommand = jest.fn()\n    const wrapper = mount(\n      <Snippet text={command} toastText=\"Code copied!\" toastType=\"secondary\" />,\n    )\n    wrapper.find('.copy').simulate('click')\n    expect(document.execCommand).toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockRestore()\n  })\n\n  afterAll(() => {\n    ;(window.getSelection as jest.Mock).mockRestore()\n    ;(document.createRange as jest.Mock).mockRestore()\n  })\n})\n"
  },
  {
    "path": "components/snippet/index.ts",
    "content": "import Snippet from './snippet'\n\nexport type { SnippetProps, ToastTypes } from './snippet'\nexport type { CopyTypes, SnippetTypes } from '../utils/prop-types'\nexport default Snippet\n"
  },
  {
    "path": "components/snippet/snippet-icon.tsx",
    "content": "import React from 'react'\n\nconst SnippetIconComponent: React.FC<unknown> = () => {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\"\n      style={{ color: 'currentcolor' }}>\n      <path d=\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\" />\n      <style jsx>{`\n        svg {\n          width: calc(var(--snippet-font-size) * 1.69);\n          height: calc(var(--snippet-font-size) * 1.69);\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nSnippetIconComponent.displayName = 'GeistSnippetIcon'\nconst SnippetIcon = React.memo(SnippetIconComponent)\nexport default SnippetIcon\n"
  },
  {
    "path": "components/snippet/snippet.tsx",
    "content": "import React, { useMemo, useRef } from 'react'\nimport useTheme from '../use-theme'\nimport { SnippetTypes, CopyTypes, NormalTypes } from '../utils/prop-types'\nimport { getStyles } from './styles'\nimport SnippetIcon from './snippet-icon'\nimport useClipboard from '../utils/use-clipboard'\nimport useToasts from '../use-toasts'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type ToastTypes = NormalTypes\ninterface Props {\n  text?: string | string[]\n  symbol?: string\n  toastText?: string\n  toastType?: ToastTypes\n  filled?: boolean\n  copy?: CopyTypes\n  type?: SnippetTypes\n  className?: string\n}\n\nconst defaultProps = {\n  filled: false,\n  symbol: '$',\n  toastText: 'Copied to clipboard!',\n  toastType: 'success' as ToastTypes,\n  copy: 'default' as CopyTypes,\n  type: 'default' as SnippetTypes,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SnippetProps = Props & NativeAttrs\n\nconst textArrayToString = (text: string[]): string => {\n  return text.reduce((pre, current) => {\n    if (!current) return pre\n    return pre ? `${pre}\\n${current}` : current\n  }, '')\n}\n\nconst SnippetComponent: React.FC<React.PropsWithChildren<SnippetProps>> = ({\n  type,\n  filled,\n  children,\n  symbol,\n  toastText,\n  toastType,\n  text,\n  copy: copyType,\n  className,\n  ...props\n}: React.PropsWithChildren<SnippetProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { copy } = useClipboard()\n  const { setToast } = useToasts()\n  const ref = useRef<HTMLPreElement>(null)\n  const isMultiLine = text && Array.isArray(text)\n\n  const style = useMemo(\n    () => getStyles(type, theme.palette, filled),\n    [type, theme.palette, filled],\n  )\n  const showCopyIcon = useMemo(() => copyType !== 'prevent', [copyType])\n  const childText = useMemo<string | undefined | null>(() => {\n    if (isMultiLine) return textArrayToString(text as string[])\n    if (!children) return text as string\n    if (!ref.current) return ''\n    return ref.current.textContent\n  }, [ref.current, children, text])\n  const symbolBefore = useMemo(() => {\n    const str = symbol.trim()\n    return str ? `${str} ` : ''\n  }, [symbol])\n\n  const clickHandler = () => {\n    if (!childText || !showCopyIcon) return\n    copy(childText)\n    if (copyType === 'silent') return\n    setToast({ text: toastText, type: toastType })\n  }\n\n  return (\n    <div className={useClasses('snippet', className)} {...props}>\n      {isMultiLine ? (\n        (text as string[]).map((t, index) => <pre key={`snippet-${index}-${t}`}>{t}</pre>)\n      ) : (\n        <pre ref={ref}>{children || text}</pre>\n      )}\n      {showCopyIcon && (\n        <div className=\"copy\" onClick={clickHandler}>\n          <SnippetIcon />\n        </div>\n      )}\n      <style jsx>{`\n        .snippet {\n          position: relative;\n          max-width: 100%;\n          color: ${style.color};\n          background-color: ${style.bgColor};\n          border: 1px solid ${style.border};\n          border-radius: ${theme.layout.radius};\n          --snippet-font-size: ${SCALES.font(0.8125)};\n          --snippet-padding-top: ${SCALES.pt(0.667)};\n          font-size: var(--snippet-font-size);\n          width: ${SCALES.width(1, 'initial')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0.667)} ${SCALES.pr(2.667)} ${SCALES.pb(0.667)}\n            ${SCALES.pl(0.667)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        pre {\n          margin: 0;\n          padding: 0;\n          border: none;\n          background-color: transparent;\n          color: ${style.color};\n          font-size: inherit;\n        }\n\n        pre::before {\n          content: '${symbolBefore}';\n          user-select: none;\n        }\n\n        pre :global(*) {\n          margin: 0;\n          padding: 0;\n          font-size: inherit;\n          color: inherit;\n        }\n\n        .copy {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          height: calc(100% - 2px);\n          background-color: ${style.bgColor};\n          display: inline-flex;\n          justify-content: center;\n          align-items: ${isMultiLine ? 'flex-start' : 'center'};\n          width: calc(3.281 * var(--snippet-font-size));\n          color: inherit;\n          transition: opacity 150ms ease 0s;\n          border-radius: ${theme.layout.radius};\n          cursor: pointer;\n          user-select: none;\n          padding-top: ${isMultiLine ? 'var(--snippet-padding-top)' : 0};\n          opacity: 0.65;\n        }\n\n        .copy:hover {\n          opacity: 1;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nSnippetComponent.defaultProps = defaultProps\nSnippetComponent.displayName = 'GeistSnippet'\nconst Snippet = withScale(SnippetComponent)\nexport default Snippet\n"
  },
  {
    "path": "components/snippet/styles.ts",
    "content": "import { SnippetTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\n\nexport type SnippetStyles = {\n  color: string\n  border: string\n  bgColor: string\n}\n\nexport const getStyles = (\n  type: SnippetTypes,\n  palette: GeistUIThemesPalette,\n  fill?: boolean,\n) => {\n  const styles: { [key in SnippetTypes]: SnippetStyles } = {\n    default: {\n      color: palette.foreground,\n      border: palette.border,\n      bgColor: palette.background,\n    },\n    success: {\n      color: palette.success,\n      border: palette.success,\n      bgColor: palette.background,\n    },\n    warning: {\n      color: palette.warning,\n      border: palette.warning,\n      bgColor: palette.background,\n    },\n    error: {\n      color: palette.error,\n      border: palette.error,\n      bgColor: palette.background,\n    },\n    secondary: {\n      color: palette.secondary,\n      border: palette.secondary,\n      bgColor: palette.background,\n    },\n    lite: {\n      color: palette.foreground,\n      border: palette.border,\n      bgColor: palette.accents_1,\n    },\n    dark: {\n      color: palette.background,\n      border: palette.foreground,\n      bgColor: palette.foreground,\n    },\n  }\n\n  const filledTypes: Array<SnippetTypes> = ['success', 'warning', 'error', 'secondary']\n  const style = styles[type]\n  const shouldFilled = filledTypes.includes(type)\n  if (!fill || !shouldFilled) return style\n\n  return {\n    ...style,\n    color: style.bgColor,\n    bgColor: style.color,\n  }\n}\n"
  },
  {
    "path": "components/spacer/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Spacer should render correctly 1`] = `\n\"<span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(1 * 16px);\n          height: calc(1 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span>\"\n`;\n\nexports[`Spacer should support x and y 1`] = `\n\"<div><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(5 * 16px);\n          height: calc(1 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(15 * 16px);\n          height: calc(1 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(1 * 16px);\n          height: calc(15 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(1 * 16px);\n          height: calc(2 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span></div>\"\n`;\n\nexports[`Spacer should work with float 1`] = `\n\"<div><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(2.2 * 16px);\n          height: calc(1 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(1.5 * 16px);\n          height: calc(1 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(1 * 16px);\n          height: calc(0.1 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span><span class=\\\\\"\\\\\"><style>\n        span {\n          display: block;\n          width: calc(1 * 16px);\n          height: calc(1.8 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span></div>\"\n`;\n\nexports[`Spacer should work with inline mode 1`] = `\n\"<span class=\\\\\"\\\\\"><style>\n        span {\n          display: inline-block;\n          width: calc(1 * 16px);\n          height: calc(1 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n      </style></span>\"\n`;\n"
  },
  {
    "path": "components/spacer/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Spacer } from 'components'\n\ndescribe('Spacer', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Spacer />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support x and y', () => {\n    const wrapper = mount(\n      <div>\n        <Spacer w={5} />\n        <Spacer w={15} />\n        <Spacer h={15} />\n        <Spacer h={2} />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with float', () => {\n    const wrapper = mount(\n      <div>\n        <Spacer w={2.2} />\n        <Spacer w={1.5} />\n        <Spacer h={0.1} />\n        <Spacer h={1.8} />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with inline mode', () => {\n    const wrapper = mount(<Spacer inline />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/spacer/index.ts",
    "content": "import Spacer from './spacer'\n\nexport type { SpacerProps } from './spacer'\nexport default Spacer\n"
  },
  {
    "path": "components/spacer/spacer.tsx",
    "content": "import React from 'react'\nimport useScale, { withScale } from '../use-scale'\n\ninterface Props {\n  inline?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  inline: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SpacerProps = Props & NativeAttrs\n\nconst SpacerComponent: React.FC<SpacerProps> = ({\n  inline,\n  className,\n  ...props\n}: SpacerProps & typeof defaultProps) => {\n  const { SCALES } = useScale()\n\n  return (\n    <span className={className} {...props}>\n      <style jsx>{`\n        span {\n          display: ${inline ? 'inline-block' : 'block'};\n          width: ${SCALES.width(1)};\n          height: ${SCALES.height(1)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </span>\n  )\n}\n\nSpacerComponent.defaultProps = defaultProps\nSpacerComponent.displayName = 'GeistSpacer'\nconst Spacer = withScale(SpacerComponent)\nexport default Spacer\n"
  },
  {
    "path": "components/spinner/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Spacer should render correctly 1`] = `\n\"<div class=\\\\\"spinner\\\\\"><div class=\\\\\"container\\\\\"><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span></div><style>\n        .spinner {\n          display: block;\n          box-sizing: border-box;\n          width: calc(1.25 * 16px);\n          height: calc(1.25 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .container {\n          width: 100%;\n          height: 100%;\n          position: relative;\n          left: 50%;\n          top: 50%;\n        }\n      </style></div>\"\n`;\n\nexports[`Spacer should work with different sizes 1`] = `\n\"<div><div class=\\\\\"spinner\\\\\"><div class=\\\\\"container\\\\\"><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span></div><style>\n        .spinner {\n          display: block;\n          box-sizing: border-box;\n          width: 100px;\n          height: calc(1.25 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .container {\n          width: 100%;\n          height: 100%;\n          position: relative;\n          left: 50%;\n          top: 50%;\n        }\n      </style></div><div class=\\\\\"spinner\\\\\"><div class=\\\\\"container\\\\\"><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span></div><style>\n        .spinner {\n          display: block;\n          box-sizing: border-box;\n          width: calc(1.25 * 16px);\n          height: 100px;\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .container {\n          width: 100%;\n          height: 100%;\n          position: relative;\n          left: 50%;\n          top: 50%;\n        }\n      </style></div><div class=\\\\\"spinner\\\\\"><div class=\\\\\"container\\\\\"><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span><span><style>\n        span {\n          background-color: #000;\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: 6px;\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      </style></span></div><style>\n        .spinner {\n          display: block;\n          box-sizing: border-box;\n          width: calc(1.875 * 16px);\n          height: calc(1.875 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .container {\n          width: 100%;\n          height: 100%;\n          position: relative;\n          left: 50%;\n          top: 50%;\n        }\n      </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/spinner/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Spinner } from 'components'\n\ndescribe('Spacer', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Spinner />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different sizes', () => {\n    const wrapper = mount(\n      <div>\n        <Spinner w=\"100px\" />\n        <Spinner h=\"100px\" />\n        <Spinner scale={2} />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/spinner/index.ts",
    "content": "import Spinner from './spinner'\n\nexport type { SpinnerProps } from './spinner'\nexport default Spinner\n"
  },
  {
    "path": "components/spinner/spinner.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport { GeistUIThemes } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type SpinnerProps = Props & NativeAttrs\n\nconst getSpans = (theme: GeistUIThemes) => {\n  return [...new Array(12)].map((_, index) => (\n    <span key={`spinner-${index}`}>\n      <style jsx>{`\n        span {\n          background-color: ${theme.palette.foreground};\n          position: absolute;\n          top: -3.9%;\n          width: 24%;\n          height: 8%;\n          left: -10%;\n          border-radius: ${theme.layout.radius};\n          animation: spinner 1.2s linear 0s infinite normal none running;\n        }\n\n        span:nth-child(1) {\n          animation-delay: -1.2s;\n          transform: rotate(0deg) translate(146%);\n        }\n\n        span:nth-child(2) {\n          animation-delay: -1.1s;\n          transform: rotate(30deg) translate(146%);\n        }\n\n        span:nth-child(3) {\n          animation-delay: -1s;\n          transform: rotate(60deg) translate(146%);\n        }\n\n        span:nth-child(4) {\n          animation-delay: -0.9s;\n          transform: rotate(90deg) translate(146%);\n        }\n\n        span:nth-child(5) {\n          animation-delay: -0.8s;\n          transform: rotate(120deg) translate(146%);\n        }\n\n        span:nth-child(6) {\n          animation-delay: -0.7s;\n          transform: rotate(150deg) translate(146%);\n        }\n\n        span:nth-child(7) {\n          animation-delay: -0.6s;\n          transform: rotate(180deg) translate(146%);\n        }\n\n        span:nth-child(8) {\n          animation-delay: -0.5s;\n          transform: rotate(210deg) translate(146%);\n        }\n\n        span:nth-child(9) {\n          animation-delay: -0.4s;\n          transform: rotate(240deg) translate(146%);\n        }\n\n        span:nth-child(10) {\n          animation-delay: -0.3s;\n          transform: rotate(270deg) translate(146%);\n        }\n\n        span:nth-child(11) {\n          animation-delay: -0.2s;\n          transform: rotate(300deg) translate(146%);\n        }\n\n        span:nth-child(12) {\n          animation-delay: -0.1s;\n          transform: rotate(330deg) translate(146%);\n        }\n\n        @keyframes spinner {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0.15;\n          }\n        }\n      `}</style>\n    </span>\n  ))\n}\n\nconst SpinnerComponent: React.FC<SpinnerProps> = ({\n  className,\n  ...props\n}: SpinnerProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const classes = useClasses('spinner', className)\n\n  return (\n    <div className={classes} {...props}>\n      <div className=\"container\">{getSpans(theme)}</div>\n\n      <style jsx>{`\n        .spinner {\n          display: block;\n          box-sizing: border-box;\n          width: ${SCALES.width(1.25)};\n          height: ${SCALES.height(1.25)};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .container {\n          width: 100%;\n          height: 100%;\n          position: relative;\n          left: 50%;\n          top: 50%;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nSpinnerComponent.defaultProps = defaultProps\nSpinnerComponent.displayName = 'GeistSpinner'\nconst Spinner = withScale(SpinnerComponent)\nexport default Spinner\n"
  },
  {
    "path": "components/table/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Table should be no erros when width is too large 1`] = `\n\"<table class=\\\\\"\\\\\"><colgroup></colgroup><thead><tr><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">property</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">description</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">default</div></th></tr></thead><style>\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: #666;\n          background: #fafafa;\n          border-bottom: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        th:last-child {\n          border-bottom: 1px solid #eaeaea;\n          border-right: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      </style><tbody><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Content type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Component</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">DOM element to use</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Bold style</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">true</div></td></tr><style>\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: #fafafa;\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid #eaeaea;\n          color: #444;\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      </style></tbody><style>\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: calc(1 * 16px);\n            font-size: var(--table-font-size);\n            width: 100%;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n        </style></table>\"\n`;\n\nexports[`Table should render children for table head 1`] = `\n\"<table class=\\\\\"\\\\\"><colgroup></colgroup><thead><tr><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\"><code>property</code></div></th></tr></thead><style>\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: #666;\n          background: #fafafa;\n          border-bottom: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        th:last-child {\n          border-bottom: 1px solid #eaeaea;\n          border-right: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      </style><tbody><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">type</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Component</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td></tr><style>\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: #fafafa;\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid #eaeaea;\n          color: #444;\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      </style></tbody><style>\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: calc(1 * 16px);\n            font-size: var(--table-font-size);\n            width: 100%;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n        </style></table>\"\n`;\n\nexports[`Table should render correctly 1`] = `\n\"<table class=\\\\\"\\\\\"><colgroup></colgroup><thead><tr><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">property</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">description</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">default</div></th></tr></thead><style>\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: #666;\n          background: #fafafa;\n          border-bottom: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        th:last-child {\n          border-bottom: 1px solid #eaeaea;\n          border-right: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      </style><tbody><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Content type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Component</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">DOM element to use</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Bold style</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">true</div></td></tr><style>\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: #fafafa;\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid #eaeaea;\n          color: #444;\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      </style></tbody><style>\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: calc(1 * 16px);\n            font-size: var(--table-font-size);\n            width: 100%;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n        </style></table>\"\n`;\n\nexports[`Table should set width automatically 1`] = `\n\"<table class=\\\\\"\\\\\"><colgroup><col width=\\\\\"25\\\\\"><col width=\\\\\"25\\\\\"><col width=\\\\\"50\\\\\"></colgroup><thead><tr><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">property</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">description</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">default</div></th></tr></thead><style>\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: #666;\n          background: #fafafa;\n          border-bottom: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        th:last-child {\n          border-bottom: 1px solid #eaeaea;\n          border-right: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      </style><tbody><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Content type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Component</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">DOM element to use</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Bold style</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">true</div></td></tr><style>\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: #fafafa;\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid #eaeaea;\n          color: #444;\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      </style></tbody><style>\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: calc(1 * 16px);\n            font-size: var(--table-font-size);\n            width: 100%;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n        </style></table>\"\n`;\n\nexports[`Table should work correctly with multiple identical props 1`] = `\n\"<table class=\\\\\"\\\\\"><colgroup></colgroup><thead><tr><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">property3</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">description2</div></th></tr></thead><style>\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: #666;\n          background: #fafafa;\n          border-bottom: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        th:last-child {\n          border-bottom: 1px solid #eaeaea;\n          border-right: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      </style><tbody><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Content type</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Component</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">DOM element to use</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Bold style</div></td></tr><style>\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: #fafafa;\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid #eaeaea;\n          color: #444;\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      </style></tbody><style>\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: calc(1 * 16px);\n            font-size: var(--table-font-size);\n            width: 100%;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n        </style></table>\"\n`;\n\nexports[`Table should work with other components 1`] = `\n\"<table class=\\\\\"\\\\\"><colgroup></colgroup><thead><tr><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">property</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">description</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">default</div></th></tr></thead><style>\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: #666;\n          background: #fafafa;\n          border-bottom: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        th:last-child {\n          border-bottom: 1px solid #eaeaea;\n          border-right: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      </style><tbody><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Content type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Component</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">DOM element to use</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Bold style</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">true</div></td></tr><tr class=\\\\\"hover\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\"><code>boolean</code></div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">true</div></td></tr><style>\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: #fafafa;\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid #eaeaea;\n          color: #444;\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      </style></tbody><style>\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: calc(1 * 16px);\n            font-size: var(--table-font-size);\n            width: 100%;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n        </style></table>\"\n`;\n\nexports[`Table should work without hover effect 1`] = `\n\"<table class=\\\\\"\\\\\"><colgroup></colgroup><thead><tr><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">property</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">description</div></th><th class=\\\\\"\\\\\"><div class=\\\\\"thead-box\\\\\">default</div></th></tr></thead><style>\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: #666;\n          background: #fafafa;\n          border-bottom: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid #eaeaea;\n          border-left: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-left-radius: 6px;\n          border-bottom-left-radius: 6px;\n        }\n\n        th:last-child {\n          border-bottom: 1px solid #eaeaea;\n          border-right: 1px solid #eaeaea;\n          border-top: 1px solid #eaeaea;\n          border-top-right-radius: 6px;\n          border-bottom-right-radius: 6px;\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      </style><tbody><tr class=\\\\\"\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Content type</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Component</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">DOM element to use</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">-</div></td></tr><tr class=\\\\\"\\\\\"><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">bold</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">Bold style</div></td><td class=\\\\\"\\\\\"><div class=\\\\\"cell\\\\\">true</div></td></tr><style>\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: #fafafa;\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid #eaeaea;\n          color: #444;\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      </style></tbody><style>\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: calc(1 * 16px);\n            font-size: var(--table-font-size);\n            width: 100%;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n        </style></table>\"\n`;\n"
  },
  {
    "path": "components/table/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Table, Code } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport { act } from 'react-dom/test-utils'\nimport { TableColumnRender } from '../table-types'\n\nconst data = [\n  { property: 'type', description: 'Content type', default: '-' },\n  { property: 'Component', description: 'DOM element to use', default: '-' },\n  { property: 'bold', description: 'Bold style', default: 'true' },\n]\n\ndescribe('Table', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Table data={data}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"default\" label=\"default\" />\n      </Table>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work correctly with multiple identical props', () => {\n    const wrapper = mount(\n      <Table data={data}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"property\" label=\"property2\" />\n        <Table.Column prop=\"property\" label=\"property3\" />\n        <Table.Column prop=\"description\" label=\"description2\" />\n      </Table>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should re-render when data changed', async () => {\n    const wrapper = mount(\n      <Table data={data}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"default\" label=\"default\" />\n      </Table>,\n    )\n    expect(wrapper.find('tbody').find('tr').length).toBe(data.length)\n    wrapper.setProps({ data: [] })\n    await updateWrapper(wrapper, 350)\n    expect(wrapper.find('tbody').find('tr').length).toBe(0)\n  })\n\n  it('should set width automatically', () => {\n    window.getComputedStyle = jest.fn().mockImplementation(() => ({\n      width: '100px',\n    }))\n    const wrapper = mount(\n      <Table data={data}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"default\" label=\"default\" width={50} />\n      </Table>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n    ;(window.getComputedStyle as jest.Mock).mockClear()\n  })\n\n  it('should be no erros when width is too large', () => {\n    window.getComputedStyle = jest.fn().mockImplementation(() => ({\n      width: '10px',\n    }))\n    const wrapper = mount(\n      <Table data={data}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"default\" label=\"default\" width={50} />\n      </Table>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n    ;(window.getComputedStyle as jest.Mock).mockClear()\n  })\n\n  it('should work with other components', () => {\n    const dataWithNodes = [\n      ...data,\n      { property: 'bold', description: <Code>boolean</Code>, default: 'true' },\n    ]\n    const wrapper = mount(\n      <Table data={dataWithNodes}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"default\" label=\"default\" />\n      </Table>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(wrapper.find('code').length).not.toBe(0)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work without hover effect', () => {\n    const wrapper = mount(\n      <Table data={data} hover={false}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"default\" label=\"default\" />\n      </Table>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be render specified elements', async () => {\n    type Item = {\n      property: string\n      description: string\n      operation: string\n    }\n    const renderAction: TableColumnRender<Item> = (value, rowData, index) => {\n      return (\n        <div>\n          <button id=\"test-btn\">Remove</button>\n          <div id=\"value\">{value}</div>\n          <div id=\"row-data\">{rowData.description}</div>\n          <div id=\"row-index\">{index}</div>\n        </div>\n      )\n    }\n    const operation = Math.random().toString(16).slice(-10)\n    const data = [{ property: 'bold', description: 'boolean', operation }]\n    const wrapper = mount(\n      <Table<Item> data={data}>\n        <Table.Column<Item> prop=\"property\" label=\"property\" />\n        <Table.Column<Item> prop=\"description\" label=\"description\" />\n        <Table.Column<Item> prop=\"operation\" label=\"operation\" render={renderAction} />\n      </Table>,\n    )\n    const buttons = wrapper.find('tbody').find('#test-btn')\n    expect(buttons.length).not.toEqual(0)\n    const value = wrapper.find('tbody').find('#value').html()\n    expect(value).toMatch(operation)\n    const rowData = wrapper.find('tbody').find('#row-data').html()\n    expect(rowData).toMatch(`${data[0].description}`)\n    const rowIndex = wrapper.find('tbody').find('#row-index').html()\n    expect(rowIndex).toMatch(`0`)\n  })\n\n  it('should render emptyText when data missing', () => {\n    const data = [{ property: 'bold', description: 'boolean' }]\n    const wrapper = mount(\n      <Table data={data} emptyText=\"test-not-found\">\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n        <Table.Column prop=\"operation\" label=\"operation\" />\n      </Table>,\n    )\n    expect(wrapper.find('tbody').text()).toContain('test-not-found')\n  })\n\n  it('should trigger events when cell clicked', () => {\n    const rowHandler = jest.fn()\n    const cellHandler = jest.fn()\n    const data = [{ property: 'bold', description: 'boolean' }]\n    const wrapper = mount(\n      <Table\n        data={data}\n        emptyText=\"test-not-found\"\n        onRow={rowHandler}\n        onCell={cellHandler}>\n        <Table.Column prop=\"property\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n      </Table>,\n    )\n    wrapper.find('tbody').find('tr').find('td').at(0).simulate('click', nativeEvent)\n    expect(rowHandler).toHaveBeenCalled()\n    expect(cellHandler).toHaveBeenCalled()\n  })\n\n  it('should wraning when prop missing', () => {\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})\n    mount(\n      <Table data={data}>\n        <Table.Column prop=\"\" label=\"property\" />\n        <Table.Column prop=\"description\" label=\"description\" />\n      </Table>,\n    )\n    expect(errorSpy).toHaveBeenCalled()\n    errorSpy.mockRestore()\n  })\n\n  it('should render children for table head', () => {\n    const wrapper = mount(\n      <Table data={data}>\n        <Table.Column prop=\"property\">\n          <Code>property</Code>\n        </Table.Column>\n      </Table>,\n    )\n    expect(wrapper.find('thead').find('code').length).not.toBe(0)\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('the changes of column should be tracked', () => {\n    const Mock = ({ label }: { label: string }) => {\n      return (\n        <Table data={data}>\n          <Table.Column prop=\"description\" label={label} />\n        </Table>\n      )\n    }\n    const wrapper = mount(<Mock label=\"test1\" />)\n    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test1')\n\n    act(() => {\n      wrapper.setProps({ label: 'test2' })\n    })\n    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test2')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the changes of children should be tracked', () => {\n    const Mock = ({ label }: { label: string }) => {\n      return (\n        <Table data={data}>\n          <Table.Column prop=\"description\">{label}</Table.Column>\n        </Table>\n      )\n    }\n    const wrapper = mount(<Mock label=\"test1\" />)\n    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test1')\n\n    act(() => {\n      wrapper.setProps({ label: 'test2' })\n    })\n    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test2')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/table/index.ts",
    "content": "import Table from './table'\n\nexport type { TableProps } from './table'\nexport type { TableColumnProps } from './table-column'\nexport type {\n  TableOnCellClick,\n  TableAbstractColumn,\n  TableOnChange,\n  TableOnRowClick,\n  TableRowClassNameHandler,\n  TableDataItemBase,\n  TableColumnRender,\n} from './table-types'\nexport default Table\n"
  },
  {
    "path": "components/table/table-body.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\nimport TableCell from './table-cell'\nimport { useTableContext } from './table-context'\nimport {\n  TableDataItemBase,\n  TableOnCellClick,\n  TableOnRowClick,\n  TableRowClassNameHandler,\n} from './table-types'\nimport useClasses from '../use-classes'\n\ninterface Props<TableDataItem extends TableDataItemBase> {\n  hover: boolean\n  emptyText: string\n  onRow?: TableOnRowClick<TableDataItem>\n  onCell?: TableOnCellClick<TableDataItem>\n  data: Array<TableDataItem>\n  className?: string\n  rowClassName: TableRowClassNameHandler<TableDataItem>\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>\nexport type TableBodyProps<TableDataItem> = Props<TableDataItem> & NativeAttrs\n\nconst TableBody = <TableDataItem extends TableDataItemBase>({\n  data,\n  hover,\n  emptyText,\n  onRow,\n  onCell,\n  rowClassName,\n}: TableBodyProps<TableDataItem> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { columns } = useTableContext<TableDataItem>()\n  const rowClickHandler = (row: TableDataItem, index: number) => {\n    onRow && onRow(row, index)\n  }\n\n  return (\n    <tbody>\n      {data.map((row, index) => {\n        const className = rowClassName(row, index)\n        return (\n          <tr\n            key={`tbody-row-${index}`}\n            className={useClasses({ hover }, className)}\n            onClick={() => rowClickHandler(row, index)}>\n            <TableCell<TableDataItem>\n              columns={columns}\n              row={row}\n              rowIndex={index}\n              emptyText={emptyText}\n              onCellClick={onCell}\n            />\n          </tr>\n        )\n      })}\n      <style jsx>{`\n        tr {\n          transition: background-color 0.25s ease;\n          font-size: inherit;\n        }\n        tr.hover:hover {\n          background-color: ${theme.palette.accents_1};\n        }\n        tr :global(td) {\n          padding: 0 0.5em;\n          border-bottom: 1px solid ${theme.palette.border};\n          color: ${theme.palette.accents_6};\n          font-size: calc(0.875 * var(--table-font-size));\n          text-align: left;\n        }\n        tr :global(.cell) {\n          min-height: calc(3.125 * var(--table-font-size));\n          display: flex;\n          -webkit-box-align: center;\n          align-items: center;\n          flex-flow: row wrap;\n        }\n      `}</style>\n    </tbody>\n  )\n}\n\nTableBody.defaultProps = defaultProps\nTableBody.displayName = 'GeistTableBody'\nexport default TableBody\n"
  },
  {
    "path": "components/table/table-cell.tsx",
    "content": "import React from 'react'\nimport { TableDataItemBase, TableAbstractColumn, TableOnCellClick } from './table-types'\n\ninterface Props<TableDataItem extends TableDataItemBase> {\n  columns: Array<TableAbstractColumn<TableDataItem>>\n  row: TableDataItem\n  rowIndex: number\n  emptyText: string\n  onCellClick?: TableOnCellClick<TableDataItem>\n}\n\nexport type TableCellData<TableDataItem> = {\n  row: number\n  column: number\n  rowValue: TableDataItem\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>\nexport type TableCellProps<TableDataItem extends TableDataItemBase> =\n  Props<TableDataItem> & NativeAttrs\n\nconst TableCell = <TableDataItem extends TableDataItemBase>({\n  columns,\n  row,\n  rowIndex,\n  emptyText,\n  onCellClick,\n}: TableCellProps<TableDataItem>) => {\n  /* eslint-disable react/jsx-no-useless-fragment */\n  return (\n    <>\n      {columns.map((column, index) => {\n        const currentRowValue = row[column.prop]\n        const cellValue = currentRowValue || emptyText\n        const shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex)\n\n        return (\n          <td\n            key={`row-td-${index}-${column.prop}`}\n            onClick={() => onCellClick && onCellClick(currentRowValue, rowIndex, index)}\n            className={column.className}>\n            <div className=\"cell\">\n              {shouldBeRenderElement ? shouldBeRenderElement : cellValue}\n            </div>\n          </td>\n        )\n      })}\n    </>\n  )\n  /* eslint-enable */\n}\n\nexport default TableCell\n"
  },
  {
    "path": "components/table/table-column.tsx",
    "content": "import React, { useEffect } from 'react'\nimport { useTableContext } from './table-context'\nimport useWarning from '../utils/use-warning'\nimport { TableColumnRender, TableDataItemBase } from './table-types'\n\nconst defaultProps = {\n  className: '',\n  render: () => {},\n}\n\nexport type TableColumnProps<TableDataItem> = {\n  prop: keyof TableDataItem\n  label?: string\n  width?: number\n  className?: string\n  render?: TableColumnRender<TableDataItem>\n}\n\nconst TableColumn = <TableDataItem extends TableDataItemBase>(\n  columnProps: React.PropsWithChildren<TableColumnProps<TableDataItem>>,\n) => {\n  const {\n    children,\n    prop,\n    label,\n    width,\n    className,\n    render: renderHandler,\n  } = columnProps as React.PropsWithChildren<TableColumnProps<TableDataItem>> &\n    typeof defaultProps\n  const { updateColumn } = useTableContext<TableDataItem>()\n  const safeProp = `${prop}`.trim()\n  if (!safeProp) {\n    useWarning('The props \"prop\" is required.', 'Table.Column')\n  }\n\n  useEffect(() => {\n    updateColumn({\n      label: children || label,\n      prop: safeProp,\n      width,\n      className,\n      renderHandler,\n    })\n  }, [children, label, prop, width, className, renderHandler])\n\n  return null\n}\n\nTableColumn.defaultProps = defaultProps\nTableColumn.displayName = 'GeistTableColumn'\nexport default TableColumn\n"
  },
  {
    "path": "components/table/table-context.ts",
    "content": "import React from 'react'\nimport { TableAbstractColumn } from './table-types'\n\nexport interface TableConfig<T> {\n  columns: Array<TableAbstractColumn<T>>\n  updateColumn: (column: TableAbstractColumn<T>) => void\n}\n\nconst defaultContext = {\n  columns: [],\n  updateColumn: () => {},\n}\n\nexport const TableContext = React.createContext<TableConfig<any>>(defaultContext)\n\nexport const useTableContext = <T>(): TableConfig<T> =>\n  React.useContext<TableConfig<T>>(TableContext)\n"
  },
  {
    "path": "components/table/table-head.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { TableAbstractColumn, TableDataItemBase } from './table-types'\n\ninterface Props<TableDataItem extends TableDataItemBase> {\n  width: number\n  columns: Array<TableAbstractColumn<TableDataItem>>\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>\nexport type TableHeadProps<TableDataItem> = Props<TableDataItem> & NativeAttrs\n\nconst makeColgroup = <TableDataItem,>(\n  width: number,\n  columns: Array<TableAbstractColumn<TableDataItem>>,\n) => {\n  const unsetWidthCount = columns.filter(c => !c.width).length\n  const customWidthTotal = columns.reduce((pre, current) => {\n    return current.width ? pre + current.width : pre\n  }, 0)\n  const averageWidth = (width - customWidthTotal) / unsetWidthCount\n  if (averageWidth <= 0) return <colgroup />\n  return (\n    <colgroup>\n      {columns.map((column, index) => (\n        <col key={`colgroup-${index}`} width={column.width || averageWidth} />\n      ))}\n    </colgroup>\n  )\n}\n\nconst TableHead = <TableDataItem extends TableDataItemBase>(\n  props: TableHeadProps<TableDataItem>,\n) => {\n  const theme = useTheme()\n  const { columns, width } = props as TableHeadProps<TableDataItem> & typeof defaultProps\n  const isScalableWidth = useMemo(() => columns.find(item => !!item.width), [columns])\n  const colgroup = useMemo(() => {\n    if (!isScalableWidth) return <colgroup />\n    return makeColgroup(width, columns)\n  }, [isScalableWidth, width])\n\n  return (\n    <>\n      {colgroup}\n      <thead>\n        <tr>\n          {columns.map((column, index) => (\n            <th key={`table-th-${column.prop}-${index}`} className={column.className}>\n              <div className=\"thead-box\">{column.label}</div>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <style jsx>{`\n        thead {\n          border-collapse: separate;\n          border-spacing: 0;\n          font-size: inherit;\n        }\n\n        th {\n          padding: 0 0.5em;\n          font-size: calc(0.75 * var(--table-font-size));\n          font-weight: normal;\n          text-align: left;\n          letter-spacing: 0;\n          vertical-align: middle;\n          min-height: calc(2.5 * var(--table-font-size));\n          color: ${theme.palette.accents_5};\n          background: ${theme.palette.accents_1};\n          border-bottom: 1px solid ${theme.palette.border};\n          border-top: 1px solid ${theme.palette.border};\n          border-radius: 0;\n        }\n\n        th:nth-child(1) {\n          border-bottom: 1px solid ${theme.palette.border};\n          border-left: 1px solid ${theme.palette.border};\n          border-top: 1px solid ${theme.palette.border};\n          border-top-left-radius: ${theme.layout.radius};\n          border-bottom-left-radius: ${theme.layout.radius};\n        }\n\n        th:last-child {\n          border-bottom: 1px solid ${theme.palette.border};\n          border-right: 1px solid ${theme.palette.border};\n          border-top: 1px solid ${theme.palette.border};\n          border-top-right-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n        }\n\n        .thead-box {\n          display: flex;\n          align-items: center;\n          -webkit-box-align: center;\n          min-height: calc(2.5 * var(--table-font-size));\n          text-transform: uppercase;\n        }\n      `}</style>\n    </>\n  )\n}\n\nTableHead.defaultProps = defaultProps\nTableHead.displayName = 'GeistTableHead'\nexport default TableHead\n"
  },
  {
    "path": "components/table/table-types.ts",
    "content": "import React from 'react'\n\nexport type TableDataItemBase = Record<string, any>\n\nexport type TableColumnRender<Item extends TableDataItemBase> = (\n  value: Item[keyof Item],\n  rowData: Item,\n  rowIndex: number,\n) => JSX.Element | void\n\nexport type TableAbstractColumn<TableDataItem> = {\n  prop: keyof TableDataItem\n  label: React.ReactNode | string\n  className: string\n  width?: number\n  renderHandler: TableColumnRender<TableDataItem>\n}\n\nexport type TableOnRowClick<TableDataItem> = (\n  rowData: TableDataItem,\n  rowIndex: number,\n) => void\nexport type TableOnCellClick<TableDataItem> = (\n  cellValue: TableDataItem[keyof TableDataItem],\n  rowIndex: number,\n  colunmIndex: number,\n) => void\nexport type TableOnChange<TableDataItem> = (data: Array<TableDataItem>) => void\nexport type TableRowClassNameHandler<TableDataItem> = (\n  rowData: TableDataItem,\n  rowIndex: number,\n) => string\n"
  },
  {
    "path": "components/table/table.tsx",
    "content": "import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport TableHead from './table-head'\nimport TableBody from './table-body'\nimport useRealShape from '../utils/use-real-shape'\nimport useResize from '../utils/use-resize'\nimport { TableContext, TableConfig } from './table-context'\nimport {\n  TableAbstractColumn,\n  TableDataItemBase,\n  TableOnCellClick,\n  TableOnChange,\n  TableOnRowClick,\n  TableRowClassNameHandler,\n} from './table-types'\nimport useScale, { ScaleProps, withScale } from '../use-scale'\nimport TableColumn from './table-column'\n\ninterface Props<TableDataItem extends TableDataItemBase> {\n  data?: Array<TableDataItem>\n  initialData?: Array<TableDataItem>\n  emptyText?: string\n  hover?: boolean\n  onRow?: TableOnRowClick<TableDataItem>\n  onCell?: TableOnCellClick<TableDataItem>\n  onChange?: TableOnChange<TableDataItem>\n  className?: string\n  rowClassName?: TableRowClassNameHandler<TableDataItem>\n}\n\nconst defaultProps = {\n  hover: true,\n  initialData: [],\n  emptyText: '',\n  className: '',\n  rowClassName: () => '',\n}\n\ntype NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>\nexport type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> &\n  NativeAttrs\n\nfunction TableComponent<TableDataItem extends TableDataItemBase>(\n  tableProps: React.PropsWithChildren<TableProps<TableDataItem>>,\n) {\n  /* eslint-disable  @typescript-eslint/no-unused-vars */\n  const {\n    children,\n    data: customData,\n    initialData,\n    hover,\n    emptyText,\n    onRow,\n    onCell,\n    onChange,\n    className,\n    rowClassName,\n    ...props\n  } = tableProps as React.PropsWithChildren<TableProps<TableDataItem>> &\n    typeof defaultProps\n  /* eslint-enable @typescript-eslint/no-unused-vars */\n  const { SCALES } = useScale()\n  const ref = useRef<HTMLTableElement>(null)\n  const [{ width }, updateShape] = useRealShape<HTMLTableElement>(ref)\n  const [columns, setColumns] = useState<Array<TableAbstractColumn<TableDataItem>>>([])\n  const [data, setData] = useState<Array<TableDataItem>>(initialData)\n  const updateColumn = (column: TableAbstractColumn<TableDataItem>) => {\n    setColumns(last => {\n      const hasColumn = last.find(item => item.prop === column.prop)\n      if (!hasColumn) return [...last, column]\n      return last.map(item => {\n        if (item.prop !== column.prop) return item\n        return column\n      })\n    })\n  }\n\n  const contextValue = useMemo<TableConfig<TableDataItem>>(\n    () => ({\n      columns,\n      updateColumn,\n    }),\n    [columns],\n  )\n\n  useEffect(() => {\n    if (typeof customData === 'undefined') return\n    setData(customData)\n  }, [customData])\n  useResize(() => updateShape())\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      <table ref={ref} className={className} {...props}>\n        <TableHead columns={columns} width={width} />\n        <TableBody<TableDataItem>\n          data={data}\n          hover={hover}\n          emptyText={emptyText}\n          onRow={onRow}\n          onCell={onCell}\n          rowClassName={rowClassName}\n        />\n        {children}\n\n        <style jsx>{`\n          table {\n            border-collapse: separate;\n            border-spacing: 0;\n            --table-font-size: ${SCALES.font(1)};\n            font-size: var(--table-font-size);\n            width: ${SCALES.width(1, '100%')};\n            height: ${SCALES.height(1, 'auto')};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n        `}</style>\n      </table>\n    </TableContext.Provider>\n  )\n}\n\nTableComponent.defaultProps = defaultProps\nTableComponent.displayName = 'GeistTable'\nTableComponent.Column = TableColumn\nlet Table = withScale(TableComponent) as any\nTable.Column = TableColumn\nexport default Table as typeof TableComponent & ScaleProps\n"
  },
  {
    "path": "components/tabs/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tabs should hide border on active 1`] = `\n\"<div class=\\\\\"tabs\\\\\"><header><div class=\\\\\"highlight\\\\\"><style>\n        .highlight {\n          background: #eaeaea;\n          position: absolute;\n          border-radius: 5px;\n          width: 0px;\n          left: -1000px;\n          height: 0px;\n          top: -1000px;\n          opacity: 0;\n          transition: 0.15s ease;\n          transition-property: opacity, width, left, top;\n        }\n      </style></div><div class=\\\\\"scroll-container\\\\\"><div class=\\\\\"tab hide-border\\\\\" role=\\\\\"button\\\\\" data-geist=\\\\\"tab-item\\\\\">label1<style>\n          .tab {\n            position: relative;\n            box-sizing: border-box;\n            cursor: pointer;\n            outline: 0;\n            text-transform: capitalize;\n            white-space: nowrap;\n            background-color: transparent;\n            color: #666;\n            user-select: none;\n            display: flex;\n            align-items: center;\n            font-size: calc(0.875 * 16px);\n            line-height: normal;\n            width: auto;\n            height: auto;\n            padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)\n              calc(0.55 * 16px);\n            margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);\n            z-index: 1;\n            --tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));\n            --tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));\n          }\n          .tab:hover {\n            color: #000;\n          }\n          .tab:after {\n            position: absolute;\n            content: '';\n            bottom: -1px;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 2px;\n            border-radius: 4px;\n            transform: scaleX(0.75);\n            background-color: #000;\n            transition: opacity, transform 200ms ease-in;\n            opacity: 0;\n          }\n          .active:after {\n            opacity: 1;\n            transform: scaleX(1);\n          }\n          .tab :global(svg) {\n            max-height: 1em;\n            margin-right: 5px;\n          }\n          .tab:first-of-type {\n            margin-left: 0;\n          }\n          .active {\n            color: #000;\n          }\n          .disabled {\n            color: #999;\n            cursor: not-allowed;\n          }\n          .hide-border:before {\n            display: block;\n            content: label1;\n            font-weight: 500;\n            height: 0;\n            overflow: hidden;\n            visibility: hidden;\n          }\n          .hide-border:after {\n            display: none;\n          }\n          .hide-border.active {\n            font-weight: 500;\n          }\n        </style></div></div></header><div class=\\\\\"content\\\\\"></div><style>\n          .tabs {\n            font-size: calc(1 * 16px);\n            width: initial;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n          header {\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            overflow-y: hidden;\n            overflow-x: scroll;\n            scrollbar-width: none;\n            position: relative;\n          }\n          .scroll-container {\n            width: 100%;\n            height: 100%;\n            flex: 1;\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            justify-content: left;\n            border-bottom: 1px solid #eaeaea;\n            padding-left: 12px;\n          }\n          header::-webkit-scrollbar {\n            display: none;\n          }\n          .hide-divider {\n            border-color: transparent;\n          }\n          .content {\n            padding-top: 0.625rem;\n          }\n        </style></div>\"\n`;\n\nexports[`Tabs should render correctly 1`] = `\n\"<div class=\\\\\"tabs\\\\\"><header><div class=\\\\\"highlight\\\\\"><style>\n        .highlight {\n          background: #eaeaea;\n          position: absolute;\n          border-radius: 5px;\n          width: 0px;\n          left: -1000px;\n          height: 0px;\n          top: -1000px;\n          opacity: 0;\n          transition: 0.15s ease;\n          transition-property: opacity, width, left, top;\n        }\n      </style></div><div class=\\\\\"scroll-container\\\\\"><div class=\\\\\"tab\\\\\" role=\\\\\"button\\\\\" data-geist=\\\\\"tab-item\\\\\">label1<style>\n          .tab {\n            position: relative;\n            box-sizing: border-box;\n            cursor: pointer;\n            outline: 0;\n            text-transform: capitalize;\n            white-space: nowrap;\n            background-color: transparent;\n            color: #666;\n            user-select: none;\n            display: flex;\n            align-items: center;\n            font-size: calc(0.875 * 16px);\n            line-height: normal;\n            width: auto;\n            height: auto;\n            padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)\n              calc(0.55 * 16px);\n            margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);\n            z-index: 1;\n            --tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));\n            --tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));\n          }\n          .tab:hover {\n            color: #000;\n          }\n          .tab:after {\n            position: absolute;\n            content: '';\n            bottom: -1px;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 2px;\n            border-radius: 4px;\n            transform: scaleX(0.75);\n            background-color: #000;\n            transition: opacity, transform 200ms ease-in;\n            opacity: 0;\n          }\n          .active:after {\n            opacity: 1;\n            transform: scaleX(1);\n          }\n          .tab :global(svg) {\n            max-height: 1em;\n            margin-right: 5px;\n          }\n          .tab:first-of-type {\n            margin-left: 0;\n          }\n          .active {\n            color: #000;\n          }\n          .disabled {\n            color: #999;\n            cursor: not-allowed;\n          }\n          .hide-border:before {\n            display: block;\n            content: label1;\n            font-weight: 500;\n            height: 0;\n            overflow: hidden;\n            visibility: hidden;\n          }\n          .hide-border:after {\n            display: none;\n          }\n          .hide-border.active {\n            font-weight: 500;\n          }\n        </style></div><div class=\\\\\"tab\\\\\" role=\\\\\"button\\\\\" data-geist=\\\\\"tab-item\\\\\">label2<style>\n          .tab {\n            position: relative;\n            box-sizing: border-box;\n            cursor: pointer;\n            outline: 0;\n            text-transform: capitalize;\n            white-space: nowrap;\n            background-color: transparent;\n            color: #666;\n            user-select: none;\n            display: flex;\n            align-items: center;\n            font-size: calc(0.875 * 16px);\n            line-height: normal;\n            width: auto;\n            height: auto;\n            padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)\n              calc(0.55 * 16px);\n            margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);\n            z-index: 1;\n            --tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));\n            --tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));\n          }\n          .tab:hover {\n            color: #000;\n          }\n          .tab:after {\n            position: absolute;\n            content: '';\n            bottom: -1px;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 2px;\n            border-radius: 4px;\n            transform: scaleX(0.75);\n            background-color: #000;\n            transition: opacity, transform 200ms ease-in;\n            opacity: 0;\n          }\n          .active:after {\n            opacity: 1;\n            transform: scaleX(1);\n          }\n          .tab :global(svg) {\n            max-height: 1em;\n            margin-right: 5px;\n          }\n          .tab:first-of-type {\n            margin-left: 0;\n          }\n          .active {\n            color: #000;\n          }\n          .disabled {\n            color: #999;\n            cursor: not-allowed;\n          }\n          .hide-border:before {\n            display: block;\n            content: label2;\n            font-weight: 500;\n            height: 0;\n            overflow: hidden;\n            visibility: hidden;\n          }\n          .hide-border:after {\n            display: none;\n          }\n          .hide-border.active {\n            font-weight: 500;\n          }\n        </style></div></div></header><div class=\\\\\"content\\\\\"></div><style>\n          .tabs {\n            font-size: calc(1 * 16px);\n            width: initial;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n          header {\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            overflow-y: hidden;\n            overflow-x: scroll;\n            scrollbar-width: none;\n            position: relative;\n          }\n          .scroll-container {\n            width: 100%;\n            height: 100%;\n            flex: 1;\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            justify-content: left;\n            border-bottom: 1px solid #eaeaea;\n            padding-left: 12px;\n          }\n          header::-webkit-scrollbar {\n            display: none;\n          }\n          .hide-divider {\n            border-color: transparent;\n          }\n          .content {\n            padding-top: 0.625rem;\n          }\n        </style></div>\"\n`;\n\nexports[`Tabs should work correctly with different styles 1`] = `\n\"<div class=\\\\\"tabs\\\\\"><header><div class=\\\\\"highlight\\\\\"><style>\n        .highlight {\n          background: #eaeaea;\n          position: absolute;\n          border-radius: 5px;\n          width: 0px;\n          left: -1000px;\n          height: 0px;\n          top: -1000px;\n          opacity: 0;\n          transition: 0.15s ease;\n          transition-property: opacity, width, left, top;\n        }\n      </style></div><div class=\\\\\"scroll-container hide-divider\\\\\"><div class=\\\\\"tab\\\\\" role=\\\\\"button\\\\\" data-geist=\\\\\"tab-item\\\\\">label1<style>\n          .tab {\n            position: relative;\n            box-sizing: border-box;\n            cursor: pointer;\n            outline: 0;\n            text-transform: capitalize;\n            white-space: nowrap;\n            background-color: transparent;\n            color: #666;\n            user-select: none;\n            display: flex;\n            align-items: center;\n            font-size: calc(0.875 * 16px);\n            line-height: normal;\n            width: auto;\n            height: auto;\n            padding: calc(0.875 * 16px) calc(0.55 * 16px) calc(0.875 * 16px)\n              calc(0.55 * 16px);\n            margin: 0 calc(0.2 * 16px) 0 calc(0.2 * 16px);\n            z-index: 1;\n            --tabs-item-hover-left: calc(-1 * calc(0.28 * 16px));\n            --tabs-item-hover-right: calc(-1 * calc(0.28 * 16px));\n          }\n          .tab:hover {\n            color: #000;\n          }\n          .tab:after {\n            position: absolute;\n            content: '';\n            bottom: -1px;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 2px;\n            border-radius: 4px;\n            transform: scaleX(0.75);\n            background-color: #000;\n            transition: opacity, transform 200ms ease-in;\n            opacity: 0;\n          }\n          .active:after {\n            opacity: 1;\n            transform: scaleX(1);\n          }\n          .tab :global(svg) {\n            max-height: 1em;\n            margin-right: 5px;\n          }\n          .tab:first-of-type {\n            margin-left: 0;\n          }\n          .active {\n            color: #000;\n          }\n          .disabled {\n            color: #999;\n            cursor: not-allowed;\n          }\n          .hide-border:before {\n            display: block;\n            content: label1;\n            font-weight: 500;\n            height: 0;\n            overflow: hidden;\n            visibility: hidden;\n          }\n          .hide-border:after {\n            display: none;\n          }\n          .hide-border.active {\n            font-weight: 500;\n          }\n        </style></div></div></header><div class=\\\\\"content\\\\\"></div><style>\n          .tabs {\n            font-size: calc(1 * 16px);\n            width: initial;\n            height: auto;\n            padding: 0 0 0 0;\n            margin: 0 0 0 0;\n          }\n          header {\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            overflow-y: hidden;\n            overflow-x: scroll;\n            scrollbar-width: none;\n            position: relative;\n          }\n          .scroll-container {\n            width: 100%;\n            height: 100%;\n            flex: 1;\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            justify-content: left;\n            border-bottom: 1px solid #eaeaea;\n            padding-left: 12px;\n          }\n          header::-webkit-scrollbar {\n            display: none;\n          }\n          .hide-divider {\n            border-color: transparent;\n          }\n          .content {\n            padding-top: 0.625rem;\n          }\n        </style></div>\"\n`;\n"
  },
  {
    "path": "components/tabs/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Tabs } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\ndescribe('Tabs', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(\n      <Tabs>\n        <Tabs.Item label=\"label1\" value=\"1\">\n          1\n        </Tabs.Item>\n        <Tabs.Item label=\"label2\" value=\"2\">\n          2\n        </Tabs.Item>\n      </Tabs>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work correctly with different styles', () => {\n    const wrapper = mount(\n      <Tabs hideDivider>\n        <Tabs.Item label=\"label1\" value=\"1\">\n          1\n        </Tabs.Item>\n      </Tabs>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should hide border on active', () => {\n    const wrapper = mount(\n      <Tabs hideBorder>\n        <Tabs.Item label=\"label1\" value=\"1\">\n          1\n        </Tabs.Item>\n      </Tabs>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should trigger events when tab changed', () => {\n    let value = ''\n    const changeHandler = jest.fn().mockImplementation(val => (value = val))\n    const wrapper = mount(\n      <Tabs initialValue=\"1\" onChange={changeHandler}>\n        <Tabs.Item label=\"label1\" value=\"1\">\n          1\n        </Tabs.Item>\n        <Tabs.Item label=\"label2\" value=\"2\">\n          2\n        </Tabs.Item>\n      </Tabs>,\n    )\n\n    wrapper.find('header').find('.tab').at(1).simulate('click', nativeEvent)\n    expect(changeHandler).toHaveBeenCalled()\n    expect(value).toBe('2')\n  })\n\n  it('should ignore events when tab disabled', () => {\n    const changeHandler = jest.fn()\n    const wrapper = mount(\n      <Tabs initialValue=\"1\" onChange={changeHandler}>\n        <Tabs.Item label=\"label1\" value=\"1\">\n          1\n        </Tabs.Item>\n        <Tabs.Item label=\"label2\" value=\"2\" disabled>\n          2\n        </Tabs.Item>\n      </Tabs>,\n    )\n\n    wrapper.find('header').find('.tab').at(1).simulate('click', nativeEvent)\n    expect(changeHandler).not.toHaveBeenCalled()\n  })\n\n  it('should be activate the specified tab', async () => {\n    const wrapper = mount(\n      <Tabs value=\"1\">\n        <Tabs.Item label=\"label1\" value=\"1\">\n          test-1\n        </Tabs.Item>\n        <Tabs.Item label=\"label2\" value=\"2\">\n          test-2\n        </Tabs.Item>\n      </Tabs>,\n    )\n    let active = wrapper.find('header').find('.active')\n    expect(active.text()).toContain('label1')\n\n    wrapper.setProps({ value: '2' })\n    await updateWrapper(wrapper, 350)\n    active = wrapper.find('header').find('.active')\n    expect(active.text()).toContain('label2')\n  })\n\n  it('should re-render when items updated', async () => {\n    const Mock = ({ label = 'label1' }) => {\n      return (\n        <Tabs value=\"1\">\n          <Tabs.Item label={label} value=\"1\">\n            test-1\n          </Tabs.Item>\n          <Tabs.Item label=\"label-fixed\" value=\"2\">\n            test-label-fixed\n          </Tabs.Item>\n        </Tabs>\n      )\n    }\n    const wrapper = mount(<Mock />)\n    let active = wrapper.find('header').find('.active')\n    expect(active.text()).toContain('label1')\n\n    wrapper.setProps({ label: 'label2' })\n    await updateWrapper(wrapper, 350)\n    active = wrapper.find('header').find('.active')\n    expect(active.text()).toContain('label2')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/tabs/index.ts",
    "content": "import Tabs from './tabs'\nimport TabsItem from './tabs-item'\n\nexport type TabsComponentType = typeof Tabs & {\n  Item: typeof TabsItem\n  Tab: typeof TabsItem\n}\n;(Tabs as TabsComponentType).Item = TabsItem\n;(Tabs as TabsComponentType).Tab = TabsItem\n\nexport type { TabsProps } from './tabs'\nexport default Tabs as TabsComponentType\n"
  },
  {
    "path": "components/tabs/tabs-context.ts",
    "content": "import React, { CSSProperties, MouseEvent } from 'react'\n\nexport type TabsInternalCellProps = {\n  onClick: (value: string) => void\n  onMouseOver: (e: MouseEvent<HTMLDivElement>) => void\n  activeClassName?: string\n  activeStyle?: CSSProperties\n  hideBorder?: boolean\n}\n\nexport type TabsInternalCell = React.FC<TabsInternalCellProps>\n\nexport interface TabsHeaderItem {\n  value: string\n  cell: TabsInternalCell\n}\n\nexport interface TabsConfig {\n  register?: (item: TabsHeaderItem) => void\n  currentValue?: string\n  inGroup: boolean\n  leftSpace?: CSSProperties['marginLeft']\n}\n\nconst defaultContext = {\n  inGroup: false,\n}\n\nexport const TabsContext = React.createContext<TabsConfig>(defaultContext)\n\nexport const useTabsContext = (): TabsConfig => React.useContext<TabsConfig>(TabsContext)\n"
  },
  {
    "path": "components/tabs/tabs-item.tsx",
    "content": "import React, { useEffect, useMemo, useRef } from 'react'\nimport { TabsInternalCellProps, useTabsContext } from './tabs-context'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  label: string | React.ReactNode\n  value: string\n  disabled?: boolean\n}\n\nconst defaultProps = {\n  disabled: false,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TabsItemProps = Props & NativeAttrs\n\nconst TabsItemComponent: React.FC<React.PropsWithChildren<TabsItemProps>> = ({\n  children,\n  value,\n  label,\n  disabled,\n}: React.PropsWithChildren<TabsItemProps> & typeof defaultProps) => {\n  const { SCALES } = useScale()\n  const { register, currentValue } = useTabsContext()\n  const isActive = useMemo(() => currentValue === value, [currentValue, value])\n\n  const TabsInternalCell: React.FC<TabsInternalCellProps> = ({\n    onClick,\n    onMouseOver,\n    activeClassName,\n    activeStyle,\n    hideBorder,\n  }) => {\n    const theme = useTheme()\n    const ref = useRef<HTMLDivElement | null>(null)\n    const { currentValue } = useTabsContext()\n    const active = currentValue === value\n    const classes = useClasses('tab', {\n      active,\n      disabled,\n      [activeClassName!]: active,\n      'hide-border': hideBorder,\n    })\n    const clickHandler = () => {\n      if (disabled) return\n      onClick && onClick(value)\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={classes}\n        role=\"button\"\n        key={value}\n        onMouseOver={onMouseOver}\n        onClick={clickHandler}\n        style={active ? activeStyle : {}}\n        data-geist=\"tab-item\">\n        {label}\n        <style jsx>{`\n          .tab {\n            position: relative;\n            box-sizing: border-box;\n            cursor: pointer;\n            outline: 0;\n            text-transform: capitalize;\n            white-space: nowrap;\n            background-color: transparent;\n            color: ${theme.palette.accents_5};\n            user-select: none;\n            display: flex;\n            align-items: center;\n            font-size: ${SCALES.font(0.875)};\n            line-height: normal;\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, 'auto')};\n            padding: ${SCALES.pt(0.875)} ${SCALES.pr(0.55)} ${SCALES.pb(0.875)}\n              ${SCALES.pl(0.55)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0.2)} ${SCALES.mb(0)} ${SCALES.ml(0.2)};\n            z-index: 1;\n            --tabs-item-hover-left: calc(-1 * ${SCALES.pl(0.28)});\n            --tabs-item-hover-right: calc(-1 * ${SCALES.pr(0.28)});\n          }\n          .tab:hover {\n            color: ${theme.palette.foreground};\n          }\n          .tab:after {\n            position: absolute;\n            content: '';\n            bottom: -1px;\n            left: 0;\n            right: 0;\n            width: 100%;\n            height: 2px;\n            border-radius: 4px;\n            transform: scaleX(0.75);\n            background-color: ${theme.palette.foreground};\n            transition: opacity, transform 200ms ease-in;\n            opacity: 0;\n          }\n          .active:after {\n            opacity: 1;\n            transform: scaleX(1);\n          }\n          .tab :global(svg) {\n            max-height: 1em;\n            margin-right: 5px;\n          }\n          .tab:first-of-type {\n            margin-left: 0;\n          }\n          .active {\n            color: ${theme.palette.foreground};\n          }\n          .disabled {\n            color: ${theme.palette.accents_3};\n            cursor: not-allowed;\n          }\n          .hide-border:before {\n            display: block;\n            content: ${label};\n            font-weight: 500;\n            height: 0;\n            overflow: hidden;\n            visibility: hidden;\n          }\n          .hide-border:after {\n            display: none;\n          }\n          .hide-border.active {\n            font-weight: 500;\n          }\n        `}</style>\n      </div>\n    )\n  }\n  TabsInternalCell.displayName = 'GeistTabsInternalCell'\n\n  useEffect(() => {\n    register && register({ value, cell: TabsInternalCell })\n  }, [value, label, disabled])\n\n  /* eslint-disable react/jsx-no-useless-fragment */\n  return isActive ? <>{children}</> : null\n}\n\nTabsItemComponent.defaultProps = defaultProps\nTabsItemComponent.displayName = 'GeistTabsItem'\nconst TabsItem = withScale(TabsItemComponent)\nexport default TabsItem\n/* eslint-enable */\n"
  },
  {
    "path": "components/tabs/tabs.tsx",
    "content": "import React, {\n  CSSProperties,\n  MouseEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport useTheme from '../use-theme'\nimport { TabsHeaderItem, TabsConfig, TabsContext } from './tabs-context'\nimport useScale, { withScale } from '../use-scale'\nimport Highlight from '../shared/highlight'\nimport { useRect } from '../utils/layouts'\nimport { isGeistElement } from '../utils/collections'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  initialValue?: string\n  value?: string\n  hideDivider?: boolean\n  hideBorder?: boolean\n  highlight?: boolean\n  onChange?: (val: string) => void\n  className?: string\n  leftSpace?: CSSProperties['marginLeft']\n  hoverHeightRatio?: number\n  hoverWidthRatio?: number\n  align?: CSSProperties['justifyContent']\n  activeClassName?: string\n  activeStyles?: CSSProperties\n}\n\nconst defaultProps = {\n  className: '',\n  hideDivider: false,\n  highlight: true,\n  leftSpace: '12px' as CSSProperties['marginLeft'],\n  hoverHeightRatio: 0.7,\n  hoverWidthRatio: 1.15,\n  activeClassName: '',\n  activeStyle: {},\n  align: 'left',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TabsProps = Props & NativeAttrs\n\nconst TabsComponent: React.FC<React.PropsWithChildren<TabsProps>> = ({\n  initialValue: userCustomInitialValue,\n  value,\n  hideDivider,\n  hideBorder,\n  children,\n  onChange,\n  className,\n  leftSpace,\n  highlight,\n  hoverHeightRatio,\n  hoverWidthRatio,\n  activeClassName,\n  activeStyle,\n  align,\n  ...props\n}: React.PropsWithChildren<TabsProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const [tabs, setTabs] = useState<Array<TabsHeaderItem>>([])\n  const [selfValue, setSelfValue] = useState<string | undefined>(userCustomInitialValue)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const [displayHighlight, setDisplayHighlight] = useState<boolean>(false)\n  const { rect, setRect } = useRect()\n\n  const register = (next: TabsHeaderItem) => {\n    setTabs(last => {\n      const hasItem = last.find(item => item.value === next.value)\n      if (!hasItem) return [...last, next]\n      return last.map(item => {\n        if (item.value !== next.value) return item\n        return {\n          ...item,\n          ...next,\n        }\n      })\n    })\n  }\n\n  const initialValue = useMemo<TabsConfig>(\n    () => ({\n      register,\n      currentValue: selfValue,\n      inGroup: true,\n      leftSpace,\n    }),\n    [selfValue, leftSpace],\n  )\n\n  useEffect(() => {\n    if (typeof value === 'undefined') return\n    setSelfValue(value)\n  }, [value])\n\n  const clickHandler = (value: string) => {\n    setSelfValue(value)\n    onChange && onChange(value)\n  }\n  const tabItemMouseOverHandler = (event: MouseEvent<HTMLDivElement>) => {\n    if (!isGeistElement(event.target as HTMLDivElement)) return\n    setRect(event, () => ref.current)\n    if (highlight) {\n      setDisplayHighlight(true)\n    }\n  }\n\n  return (\n    <TabsContext.Provider value={initialValue}>\n      <div className={useClasses('tabs', className)} {...props}>\n        <header ref={ref} onMouseLeave={() => setDisplayHighlight(false)}>\n          <Highlight\n            rect={rect}\n            visible={displayHighlight}\n            hoverHeightRatio={hoverHeightRatio}\n            hoverWidthRatio={hoverWidthRatio}\n          />\n          <div\n            className={useClasses('scroll-container', { 'hide-divider': hideDivider })}>\n            {tabs.map(({ cell: Cell, value }) => (\n              <Cell\n                key={value}\n                onClick={clickHandler}\n                onMouseOver={tabItemMouseOverHandler}\n                activeClassName={activeClassName}\n                activeStyle={activeStyle}\n                hideBorder={hideBorder}\n              />\n            ))}\n          </div>\n        </header>\n        <div className=\"content\">{children}</div>\n        <style jsx>{`\n          .tabs {\n            font-size: ${SCALES.font(1)};\n            width: ${SCALES.width(1, 'initial')};\n            height: ${SCALES.height(1, 'auto')};\n            padding: ${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n          header {\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            overflow-y: hidden;\n            overflow-x: scroll;\n            scrollbar-width: none;\n            position: relative;\n          }\n          .scroll-container {\n            width: 100%;\n            height: 100%;\n            flex: 1;\n            display: flex;\n            flex-wrap: nowrap;\n            align-items: center;\n            justify-content: ${align};\n            border-bottom: 1px solid ${theme.palette.border};\n            padding-left: ${leftSpace};\n          }\n          header::-webkit-scrollbar {\n            display: none;\n          }\n          .hide-divider {\n            border-color: transparent;\n          }\n          .content {\n            padding-top: 0.625rem;\n          }\n        `}</style>\n      </div>\n    </TabsContext.Provider>\n  )\n}\n\nTabsComponent.defaultProps = defaultProps\nTabsComponent.displayName = 'GeistTabs'\nconst Tabs = withScale(TabsComponent)\nexport default Tabs\n"
  },
  {
    "path": "components/tag/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tag should work with invert 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {\n      \"class\": \"\",\n    },\n    \"children\": Array [\n      Node {\n        \"data\": \"success\",\n        \"next\": Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid transparent;\n          background-color: #0070f3;\n          color: #fff;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n          ],\n          \"name\": \"style\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"style\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"text\",\n      },\n      Node {\n        \"attribs\": Object {},\n        \"children\": Array [\n          Node {\n            \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid transparent;\n          background-color: #0070f3;\n          color: #fff;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n        ],\n        \"name\": \"style\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"data\": \"success\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"text\",\n        },\n        \"type\": \"style\",\n        \"x-attribsNamespace\": Object {},\n        \"x-attribsPrefix\": Object {},\n      },\n    ],\n    \"name\": \"span\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {\n      \"class\": undefined,\n    },\n    \"x-attribsPrefix\": Object {\n      \"class\": undefined,\n    },\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n\nexports[`Tag should work with types 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"success\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"success\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"secondary\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"secondary\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"error\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"error\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"dark\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"dark\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"secondary\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"secondary\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"error\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"error\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"dark\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"dark\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": [Circular],\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"success\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"success\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"error\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"error\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"dark\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"dark\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"secondary\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"secondary\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"success\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"success\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"\",\n        },\n        \"children\": Array [\n          Node {\n            \"data\": \"dark\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"text\",\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #000;\n          background-color: #fff;\n          color: #000;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"data\": \"dark\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"span\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"\",\n          },\n          \"children\": Array [\n            Node {\n              \"data\": \"error\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"text\",\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #e00;\n          background-color: #fff;\n          color: #e00;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"data\": \"error\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"span\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": Node {\n            \"attribs\": Object {\n              \"class\": \"\",\n            },\n            \"children\": Array [\n              Node {\n                \"data\": \"secondary\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #666;\n          background-color: #fff;\n          color: #666;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"data\": \"secondary\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": [Circular],\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"\",\n              },\n              \"children\": Array [\n                Node {\n                  \"data\": \"success\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        span {\n          display: inline-block;\n          border: 1px solid #0070f3;\n          background-color: #fff;\n          color: #0070f3;\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: calc(0.3125 * 16px);\n          font-size: calc(0.875 * 16px);\n          width: auto;\n          height: calc(1.75 * 16px);\n          padding: calc(0.375 * 16px) calc(0.375 * 16px) calc(0.375 * 16px)\n            calc(0.375 * 16px);\n          margin: 0 0 0 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"data\": \"success\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/tag/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { Tag } from 'components'\n\ndescribe('Tag', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Tag>tag</Tag>)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with types', () => {\n    const wrapper = render(\n      <div>\n        <Tag type=\"success\">success</Tag>\n        <Tag type=\"secondary\">secondary</Tag>\n        <Tag type=\"error\">error</Tag>\n        <Tag type=\"dark\">dark</Tag>\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should work with invert', () => {\n    const wrapper = render(\n      <Tag type=\"success\" invert>\n        success\n      </Tag>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should work when child is null', () => {\n    const wrapper = mount(<Tag />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/tag/index.ts",
    "content": "import Tag from './tag'\n\nexport type { TagProps, TagColors, TagTypes } from './tag'\nexport default Tag\n"
  },
  {
    "path": "components/tag/tag.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { SnippetTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport useScale, { withScale } from '../use-scale'\n\nexport type TagTypes = SnippetTypes\ninterface Props {\n  type?: TagTypes\n  invert?: boolean\n  className?: string\n}\n\nconst defaultProps = {\n  type: 'default' as TagTypes,\n  invert: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TagProps = Props & NativeAttrs\n\nexport type TagColors = {\n  color: string\n  bgColor: string\n  borderColor: string\n}\n\nconst getColors = (type: TagTypes, palette: GeistUIThemesPalette, invert: boolean) => {\n  const colors: {\n    [key in TagTypes]: Pick<TagColors, 'color'> & Partial<TagColors>\n  } = {\n    default: {\n      color: palette.foreground,\n    },\n    success: {\n      color: palette.success,\n    },\n    warning: {\n      color: palette.warning,\n    },\n    error: {\n      color: palette.error,\n    },\n    secondary: {\n      color: palette.secondary,\n    },\n    dark: {\n      color: palette.foreground,\n      bgColor: palette.background,\n    },\n    lite: {\n      color: palette.foreground,\n      bgColor: palette.accents_2,\n    },\n  }\n  const hideBorder = invert || type === 'lite'\n\n  const cardStyle = {\n    ...colors[type],\n    bgColor: colors[type].bgColor || palette.background,\n    borderColor: hideBorder ? 'transparent' : colors[type].color,\n  }\n\n  return !invert\n    ? cardStyle\n    : {\n        ...cardStyle,\n        color: cardStyle.bgColor,\n        bgColor: cardStyle.color,\n      }\n}\n\nconst TagComponent: React.FC<React.PropsWithChildren<TagProps>> = ({\n  type,\n  children,\n  className,\n  invert,\n  ...props\n}: React.PropsWithChildren<TagProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const { color, bgColor, borderColor } = useMemo(\n    () => getColors(type, theme.palette, invert),\n    [type, theme.palette, invert],\n  )\n\n  return (\n    <span className={className} {...props}>\n      {children}\n      <style jsx>{`\n        span {\n          display: inline-block;\n          border: 1px solid ${borderColor};\n          background-color: ${bgColor};\n          color: ${color};\n          box-sizing: border-box;\n          line-height: 1em;\n          border-radius: ${SCALES.height(0.3125)};\n          font-size: ${SCALES.font(0.875)};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1.75)};\n          padding: ${SCALES.pt(0.375)} ${SCALES.pr(0.375)} ${SCALES.pb(0.375)}\n            ${SCALES.pl(0.375)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n      `}</style>\n    </span>\n  )\n}\n\nTagComponent.defaultProps = defaultProps\nTagComponent.displayName = 'GeistTag'\nconst Tag = withScale(TagComponent)\nexport default Tag\n"
  },
  {
    "path": "components/text/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Text should be able to specify the size of text 1`] = `\n\"<p class=\\\\\"font\\\\\">test-value<style>\n        p {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: calc(14 * 16px);\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p>\"\n`;\n\nexports[`Text should be able to specify the size of text 2`] = `\n\"<p class=\\\\\"font\\\\\">test-value<style>\n        p {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: 12rem;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p>\"\n`;\n\nexports[`Text should render P element in the default 1`] = `\n\"<p class=\\\\\"\\\\\">test-value<style>\n        p {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p>\"\n`;\n\nexports[`Text should render default color when type missing 1`] = `\n\"<p class=\\\\\"\\\\\">test-value<style>\n        p {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p>\"\n`;\n\nexports[`Text should work with different styles 1`] = `\n\"<div><p class=\\\\\"\\\\\">test-value<style>\n        p {\n          color: #666;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p><p class=\\\\\"\\\\\">test-value<style>\n        p {\n          color: #0070f3;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p><p class=\\\\\"\\\\\">test-value<style>\n        p {\n          color: #f5a623;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p><p class=\\\\\"\\\\\">test-value<style>\n        p {\n          color: #e00;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p></div>\"\n`;\n\nexports[`Text the combined style should be rendered 1`] = `\n\"<p class=\\\\\"\\\\\"><b class=\\\\\"\\\\\"><del class=\\\\\"\\\\\">test-value<style>\n        del {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></del><style>\n        b {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></b><style>\n        p {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p>\"\n`;\n\nexports[`Text the specified element should be rendered 1`] = `\n\"<div><h1 class=\\\\\"\\\\\">test-value<style>\n        h1 {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></h1><h2 class=\\\\\"\\\\\">test-value<style>\n        h2 {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></h2><h3 class=\\\\\"\\\\\">test-value<style>\n        h3 {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></h3><h4 class=\\\\\"\\\\\">test-value<style>\n        h4 {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></h4><h5 class=\\\\\"\\\\\">test-value<style>\n        h5 {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></h5><h6 class=\\\\\"\\\\\">test-value<style>\n        h6 {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></h6><p class=\\\\\"\\\\\">test-value<style>\n        p {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></p><small class=\\\\\"\\\\\">test-value<style>\n        small {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></small><span class=\\\\\"\\\\\">test-value<style>\n        span {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></span><del class=\\\\\"\\\\\">test-value<style>\n        del {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></del><i class=\\\\\"\\\\\">test-value<style>\n        i {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></i><em class=\\\\\"\\\\\">test-value<style>\n        em {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></em><b class=\\\\\"\\\\\">test-value<style>\n        b {\n          color: inherit;\n          width: auto;\n          height: auto;\n        }\n        .font {\n          font-size: inherit;\n        }\n        .mx {\n          margin-left: revert;\n          margin-right: revert;\n        }\n        .my {\n          margin-top: revert;\n          margin-bottom: revert;\n        }\n        .px {\n          padding-left: revert;\n          padding-right: revert;\n        }\n        .py {\n          padding-top: revert;\n          padding-bottom: revert;\n        }\n      </style></b></div>\"\n`;\n"
  },
  {
    "path": "components/text/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Text } from 'components'\n\ndescribe('Text', () => {\n  it('should render P element in the default', () => {\n    const wrapper = mount(<Text>test-value</Text>)\n    expect(wrapper.find('p')).not.toBe(0)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different styles', () => {\n    const wrapper = mount(\n      <div>\n        <Text type=\"secondary\">test-value</Text>\n        <Text type=\"success\">test-value</Text>\n        <Text type=\"warning\">test-value</Text>\n        <Text type=\"error\">test-value</Text>\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the specified element should be rendered', () => {\n    const elements = [\n      'h1',\n      'h2',\n      'h3',\n      'h4',\n      'h5',\n      'h6',\n      'p',\n      'small',\n      'span',\n      'del',\n      'i',\n      'em',\n      'b',\n    ]\n    const wrapper = mount(\n      <div>\n        {elements.map((el, index) => {\n          const prop = { [el]: true }\n          return (\n            <Text {...prop} key={`${el}-${index}`}>\n              test-value\n            </Text>\n          )\n        })}\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('the combined style should be rendered', () => {\n    const wrapper = mount(\n      <Text p b del>\n        test-value\n      </Text>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should render default color when type missing', () => {\n    const Mock = Text as any\n    const wrapper = mount(<Mock type=\"unknow\">test-value</Mock>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should be able to specify the size of text', () => {\n    let wrapper = mount(<Text font={14}>test-value</Text>)\n    expect(wrapper.html()).toMatchSnapshot()\n\n    wrapper = mount(<Text font=\"12rem\">test-value</Text>)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/text/child.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport { NormalTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\nimport useScale from '../use-scale'\n\nexport interface Props {\n  tag: keyof JSX.IntrinsicElements\n  type?: NormalTypes\n  className?: string\n}\n\nconst defaultProps = {\n  type: 'default' as NormalTypes,\n  className: '',\n}\n\nconst getTypeColor = (type: NormalTypes, palette: GeistUIThemesPalette) => {\n  const colors: { [key in NormalTypes]: string } = {\n    default: 'inherit',\n    secondary: palette.secondary,\n    success: palette.success,\n    warning: palette.warning,\n    error: palette.error,\n  }\n\n  return colors[type] || colors.default\n}\n\ntype NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>\nexport type TextChildProps = Props & NativeAttrs\n\nconst TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = ({\n  children,\n  tag,\n  className,\n  type,\n  ...props\n}: React.PropsWithChildren<TextChildProps> & typeof defaultProps) => {\n  const Component = tag\n  const theme = useTheme()\n  const { SCALES, getScaleProps } = useScale()\n  const font = getScaleProps('font')\n  const mx = getScaleProps(['margin', 'marginLeft', 'marginRight', 'mx', 'ml', 'mr'])\n  const my = getScaleProps(['margin', 'marginTop', 'marginBottom', 'my', 'mt', 'mb'])\n  const px = getScaleProps(['padding', 'paddingLeft', 'paddingRight', 'pl', 'pr', 'px'])\n  const py = getScaleProps(['padding', 'paddingTop', 'paddingBottom', 'pt', 'pb', 'py'])\n  const color = useMemo(() => getTypeColor(type, theme.palette), [type, theme.palette])\n  const classNames = useMemo<string>(() => {\n    const keys = [\n      { value: mx, className: 'mx' },\n      { value: my, className: 'my' },\n      { value: px, className: 'px' },\n      { value: py, className: 'py' },\n      { value: font, className: 'font' },\n    ]\n    const scaleClassNames = keys.reduce((pre, next) => {\n      if (typeof next.value === 'undefined') return pre\n      return `${pre} ${next.className}`\n    }, '')\n    return `${scaleClassNames} ${className}`.trim()\n  }, [mx, my, px, py, font, className])\n\n  return (\n    <Component className={classNames} {...props}>\n      {children}\n      <style jsx>{`\n        ${tag} {\n          color: ${color};\n          width: ${SCALES.width(1, 'auto')};\n          height: ${SCALES.height(1, 'auto')};\n        }\n        .font {\n          font-size: ${SCALES.font(1, 'inherit')};\n        }\n        .mx {\n          margin-left: ${SCALES.ml(0, 'revert')};\n          margin-right: ${SCALES.mr(0, 'revert')};\n        }\n        .my {\n          margin-top: ${SCALES.mt(0, 'revert')};\n          margin-bottom: ${SCALES.mb(0, 'revert')};\n        }\n        .px {\n          padding-left: ${SCALES.pl(0, 'revert')};\n          padding-right: ${SCALES.pr(0, 'revert')};\n        }\n        .py {\n          padding-top: ${SCALES.pt(0, 'revert')};\n          padding-bottom: ${SCALES.pb(0, 'revert')};\n        }\n      `}</style>\n    </Component>\n  )\n}\n\nTextChild.defaultProps = defaultProps\nTextChild.displayName = 'GeistTextChild'\nexport default TextChild\n"
  },
  {
    "path": "components/text/index.ts",
    "content": "import Text from './text'\n\nexport type { TextProps, TextTypes } from './text'\nexport default Text\n"
  },
  {
    "path": "components/text/text.tsx",
    "content": "import React, { ReactNode, useMemo } from 'react'\nimport { NormalTypes } from '../utils/prop-types'\nimport TextChild from './child'\nimport { withScale } from '../use-scale'\n\nexport type TextTypes = NormalTypes\ninterface Props {\n  h1?: boolean\n  h2?: boolean\n  h3?: boolean\n  h4?: boolean\n  h5?: boolean\n  h6?: boolean\n  p?: boolean\n  b?: boolean\n  small?: boolean\n  i?: boolean\n  span?: boolean\n  del?: boolean\n  em?: boolean\n  blockquote?: boolean\n  className?: string\n  type?: TextTypes\n}\n\nconst defaultProps = {\n  h1: false,\n  h2: false,\n  h3: false,\n  h4: false,\n  h5: false,\n  h6: false,\n  p: false,\n  b: false,\n  small: false,\n  i: false,\n  span: false,\n  del: false,\n  em: false,\n  blockquote: false,\n  className: '',\n  type: 'default' as TextTypes,\n}\n\ntype ElementMap = { [key in keyof JSX.IntrinsicElements]?: boolean }\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TextProps = Props & NativeAttrs\n\ntype TextRenderableElements = Array<keyof JSX.IntrinsicElements>\n\nconst getModifierChild = (tags: TextRenderableElements, children: ReactNode) => {\n  if (!tags.length) return children\n  const nextTag = tags.slice(1, tags.length)\n  return <TextChild tag={tags[0]}>{getModifierChild(nextTag, children)}</TextChild>\n}\n\nconst TextComponent: React.FC<React.PropsWithChildren<TextProps>> = ({\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p,\n  b,\n  small,\n  i,\n  span,\n  del,\n  em,\n  blockquote,\n  children,\n  className,\n  ...props\n}: React.PropsWithChildren<TextProps> & typeof defaultProps) => {\n  const elements: ElementMap = { h1, h2, h3, h4, h5, h6, p, blockquote }\n  const inlineElements: ElementMap = { span, small, b, em, i, del }\n  const names = Object.keys(elements).filter(\n    (name: keyof JSX.IntrinsicElements) => elements[name],\n  ) as TextRenderableElements\n  const inlineNames = Object.keys(inlineElements).filter(\n    (name: keyof JSX.IntrinsicElements) => inlineElements[name],\n  ) as TextRenderableElements\n\n  /**\n   *  Render element \"p\" only if no element is found.\n   *  If there is only one modifier, just rendered one modifier element\n   *  e.g.\n   *    <Text /> => <p />\n   *    <Text em /> => <em />\n   *    <Text p em /> => <p><em>children</em></p>\n   *\n   */\n\n  const tag = useMemo(() => {\n    if (names[0]) return names[0]\n    if (inlineNames[0]) return inlineNames[0]\n    return 'p' as keyof JSX.IntrinsicElements\n  }, [names, inlineNames])\n\n  const renderableChildElements = inlineNames.filter(\n    (name: keyof JSX.IntrinsicElements) => name !== tag,\n  ) as TextRenderableElements\n\n  const modifers = useMemo(() => {\n    if (!renderableChildElements.length) return children\n    return getModifierChild(renderableChildElements, children)\n  }, [renderableChildElements, children])\n\n  return (\n    <TextChild className={className} tag={tag} {...props}>\n      {modifers}\n    </TextChild>\n  )\n}\n\nTextComponent.defaultProps = defaultProps\nTextComponent.displayName = 'GeistText'\nconst Text = withScale(TextComponent)\nexport default Text\n"
  },
  {
    "path": "components/textarea/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Textarea should render correctly 1`] = `\n\"<div class=\\\\\"wrapper\\\\\"><textarea placeholder=\\\\\"placeholder\\\\\"></textarea><style>\n          .wrapper {\n            display: inline-flex;\n            box-sizing: border-box;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            color: #000;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n            min-width: 12.5rem;\n            max-width: 95vw;\n            --textarea-font-size: calc(0.875 * 16px);\n            --textarea-height: auto;\n            width: initial;\n            height: var(--textarea-height);\n            margin: 0 0 0 0;\n          }\n          .wrapper.hover {\n            border-color: #666;\n          }\n          .wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n          textarea {\n            background-color: transparent;\n            box-shadow: none;\n            display: block;\n            font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n            font-size: var(--textarea-font-size);\n            width: 100%;\n            height: var(--textarea-height);\n            border: none;\n            outline: none;\n            padding: calc(0.5 * 16px) calc(0.5 * 16px) calc(0.5 * 16px)\n              calc(0.5 * 16px);\n            resize: none;\n          }\n          .disabled > textarea {\n            cursor: not-allowed;\n          }\n          textarea:-webkit-autofill,\n          textarea:-webkit-autofill:hover,\n          textarea:-webkit-autofill:active,\n          textarea:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n          }\n        </style></div>\"\n`;\n\nexports[`Textarea should work with different styles 1`] = `\n\"<div><div class=\\\\\"wrapper\\\\\"><textarea></textarea><style>\n          .wrapper {\n            display: inline-flex;\n            box-sizing: border-box;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #666;\n            color: #000;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n            min-width: 12.5rem;\n            max-width: 95vw;\n            --textarea-font-size: calc(0.875 * 16px);\n            --textarea-height: auto;\n            width: initial;\n            height: var(--textarea-height);\n            margin: 0 0 0 0;\n          }\n          .wrapper.hover {\n            border-color: #666;\n          }\n          .wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n          textarea {\n            background-color: transparent;\n            box-shadow: none;\n            display: block;\n            font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n            font-size: var(--textarea-font-size);\n            width: 100%;\n            height: var(--textarea-height);\n            border: none;\n            outline: none;\n            padding: calc(0.5 * 16px) calc(0.5 * 16px) calc(0.5 * 16px)\n              calc(0.5 * 16px);\n            resize: none;\n          }\n          .disabled > textarea {\n            cursor: not-allowed;\n          }\n          textarea:-webkit-autofill,\n          textarea:-webkit-autofill:hover,\n          textarea:-webkit-autofill:active,\n          textarea:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n          }\n        </style></div><div class=\\\\\"wrapper\\\\\"><textarea></textarea><style>\n          .wrapper {\n            display: inline-flex;\n            box-sizing: border-box;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            color: #000;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n            min-width: 12.5rem;\n            max-width: 95vw;\n            --textarea-font-size: calc(0.875 * 16px);\n            --textarea-height: auto;\n            width: 20%;\n            height: var(--textarea-height);\n            margin: 0 0 0 0;\n          }\n          .wrapper.hover {\n            border-color: #666;\n          }\n          .wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n          textarea {\n            background-color: transparent;\n            box-shadow: none;\n            display: block;\n            font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n            font-size: var(--textarea-font-size);\n            width: 100%;\n            height: var(--textarea-height);\n            border: none;\n            outline: none;\n            padding: calc(0.5 * 16px) calc(0.5 * 16px) calc(0.5 * 16px)\n              calc(0.5 * 16px);\n            resize: none;\n          }\n          .disabled > textarea {\n            cursor: not-allowed;\n          }\n          textarea:-webkit-autofill,\n          textarea:-webkit-autofill:hover,\n          textarea:-webkit-autofill:active,\n          textarea:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n          }\n        </style></div><div class=\\\\\"wrapper\\\\\"><textarea></textarea><style>\n          .wrapper {\n            display: inline-flex;\n            box-sizing: border-box;\n            user-select: none;\n            border-radius: 6px;\n            border: 1px solid #eaeaea;\n            color: #000;\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n            min-width: 12.5rem;\n            max-width: 95vw;\n            --textarea-font-size: calc(0.875 * 16px);\n            --textarea-height: 100px;\n            width: initial;\n            height: var(--textarea-height);\n            margin: 0 0 0 0;\n          }\n          .wrapper.hover {\n            border-color: #666;\n          }\n          .wrapper.disabled {\n            background-color: #fafafa;\n            border-color: #eaeaea;\n            cursor: not-allowed;\n          }\n          textarea {\n            background-color: transparent;\n            box-shadow: none;\n            display: block;\n            font-family: \\\\\"Inter\\\\\", -apple-system, BlinkMacSystemFont, \\\\\"Segoe UI\\\\\", \\\\\"Roboto\\\\\", \\\\\"Oxygen\\\\\", \\\\\"Ubuntu\\\\\", \\\\\"Cantarell\\\\\", \\\\\"Fira Sans\\\\\", \\\\\"Droid Sans\\\\\", \\\\\"Helvetica Neue\\\\\", sans-serif;\n            font-size: var(--textarea-font-size);\n            width: 100%;\n            height: var(--textarea-height);\n            border: none;\n            outline: none;\n            padding: calc(0.5 * 16px) calc(0.5 * 16px) calc(0.5 * 16px)\n              calc(0.5 * 16px);\n            resize: none;\n          }\n          .disabled > textarea {\n            cursor: not-allowed;\n          }\n          textarea:-webkit-autofill,\n          textarea:-webkit-autofill:hover,\n          textarea:-webkit-autofill:active,\n          textarea:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px #fff inset !important;\n          }\n        </style></div></div>\"\n`;\n"
  },
  {
    "path": "components/textarea/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Textarea } from 'components'\nimport { nativeEvent } from 'tests/utils'\n\ndescribe('Textarea', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Textarea placeholder=\"placeholder\" />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different styles', () => {\n    const wrapper = mount(\n      <div>\n        <Textarea type=\"secondary\" />\n        <Textarea width=\"20%\" />\n        <Textarea height=\"100px\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should set textarea from value', () => {\n    const wrapper = mount(<Textarea initialValue=\"test-value\" />)\n    let el = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement\n    expect(el.value).toEqual('test-value')\n\n    wrapper.setProps({ value: 'test-value2' })\n    el = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement\n    expect(el.value).toEqual('test-value2')\n  })\n\n  it('should trigger events when textarea changed', () => {\n    let value = ''\n    const handler = jest.fn().mockImplementation(e => (value = e.target.value))\n    const wrapper = mount(<Textarea onChange={handler} />)\n    wrapper.find('textarea').simulate('change', { target: { value: 'test-value' } })\n    expect(handler).toHaveBeenCalled()\n    expect(value).toEqual('test-value')\n    handler.mockRestore()\n  })\n\n  it('should ignore events when disabled or readonly', () => {\n    const handler = jest.fn()\n    const wrapper = mount(<Textarea onChange={handler} disabled />)\n    wrapper.find('textarea').simulate('change', { target: { value: 'test-value' } })\n    expect(handler).not.toHaveBeenCalled()\n\n    wrapper.setProps({ disabled: false, readOnly: true })\n    wrapper.find('textarea').simulate('change', { target: { value: 'test-value2' } })\n    expect(handler).not.toHaveBeenCalled()\n    handler.mockRestore()\n  })\n\n  it('should pass through blur event', () => {\n    const blurHandler = jest.fn()\n    const focusHandler = jest.fn()\n    const wrapper = mount(<Textarea onBlur={blurHandler} onFocus={focusHandler} />)\n\n    wrapper.find('textarea').simulate('focus', nativeEvent)\n    expect(focusHandler).toHaveBeenCalled()\n\n    wrapper.find('textarea').simulate('blur', nativeEvent)\n    expect(blurHandler).toHaveBeenCalled()\n  })\n})\n"
  },
  {
    "path": "components/textarea/index.ts",
    "content": "import Textarea from './textarea'\n\nexport type { TextareaProps, TextareaResizes, TextareaTypes } from './textarea'\nexport default Textarea\n"
  },
  {
    "path": "components/textarea/textarea.tsx",
    "content": "import React, { useRef, useImperativeHandle, useEffect, useMemo, useState } from 'react'\nimport useTheme from '../use-theme'\nimport { NormalTypes, tuple } from '../utils/prop-types'\nimport { getColors } from '../input/styles'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nconst resizeTypes = tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit')\nexport type TextareaResizes = typeof resizeTypes[number]\nexport type TextareaTypes = NormalTypes\ninterface Props {\n  value?: string\n  initialValue?: string\n  placeholder?: string\n  type?: TextareaTypes\n  disabled?: boolean\n  readOnly?: boolean\n  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void\n  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void\n  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void\n  className?: string\n  resize?: TextareaResizes\n}\n\nconst defaultProps = {\n  initialValue: '',\n  type: 'default' as TextareaTypes,\n  disabled: false,\n  readOnly: false,\n  className: '',\n  resize: 'none' as TextareaResizes,\n}\n\ntype NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>\nexport type TextareaProps = Props & NativeAttrs\n\nconst TextareaComponent = React.forwardRef<\n  HTMLTextAreaElement,\n  React.PropsWithChildren<TextareaProps>\n>(\n  (\n    {\n      type,\n      disabled,\n      readOnly,\n      onFocus,\n      onBlur,\n      className,\n      initialValue,\n      onChange,\n      value,\n      placeholder,\n      resize,\n      ...props\n    }: React.PropsWithChildren<TextareaProps> & typeof defaultProps,\n    ref: React.Ref<HTMLTextAreaElement | null>,\n  ) => {\n    const theme = useTheme()\n    const { SCALES } = useScale()\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    useImperativeHandle(ref, () => textareaRef.current)\n    const isControlledComponent = useMemo(() => value !== undefined, [value])\n    const [selfValue, setSelfValue] = useState<string>(initialValue)\n    const [hover, setHover] = useState<boolean>(false)\n    const { color, borderColor, hoverBorder } = useMemo(\n      () => getColors(theme.palette, type),\n      [theme.palette, type],\n    )\n    const classes = useClasses('wrapper', { hover, disabled }, className)\n\n    const changeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (disabled || readOnly) return\n      setSelfValue(event.target.value)\n      onChange && onChange(event)\n    }\n    const focusHandler = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n      setHover(true)\n      onFocus && onFocus(e)\n    }\n    const blurHandler = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n      setHover(false)\n      onBlur && onBlur(e)\n    }\n\n    useEffect(() => {\n      if (isControlledComponent) {\n        setSelfValue(value as string)\n      }\n    })\n\n    const controlledValue = isControlledComponent\n      ? { value: selfValue }\n      : { defaultValue: initialValue }\n    const textareaProps = {\n      ...props,\n      ...controlledValue,\n    }\n\n    return (\n      <div className={classes}>\n        <textarea\n          ref={textareaRef}\n          disabled={disabled}\n          placeholder={placeholder}\n          readOnly={readOnly}\n          onFocus={focusHandler}\n          onBlur={blurHandler}\n          onChange={changeHandler}\n          {...textareaProps}\n        />\n        <style jsx>{`\n          .wrapper {\n            display: inline-flex;\n            box-sizing: border-box;\n            user-select: none;\n            border-radius: ${theme.layout.radius};\n            border: 1px solid ${borderColor};\n            color: ${color};\n            transition: border 0.2s ease 0s, color 0.2s ease 0s;\n            min-width: 12.5rem;\n            max-width: 95vw;\n            --textarea-font-size: ${SCALES.font(0.875)};\n            --textarea-height: ${SCALES.height(1, 'auto')};\n            width: ${SCALES.width(1, 'initial')};\n            height: var(--textarea-height);\n            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n          }\n          .wrapper.hover {\n            border-color: ${hoverBorder};\n          }\n          .wrapper.disabled {\n            background-color: ${theme.palette.accents_1};\n            border-color: ${theme.palette.accents_2};\n            cursor: not-allowed;\n          }\n          textarea {\n            background-color: transparent;\n            box-shadow: none;\n            display: block;\n            font-family: ${theme.font.sans};\n            font-size: var(--textarea-font-size);\n            width: 100%;\n            height: var(--textarea-height);\n            border: none;\n            outline: none;\n            padding: ${SCALES.pt(0.5)} ${SCALES.pr(0.5)} ${SCALES.pb(0.5)}\n              ${SCALES.pl(0.5)};\n            resize: ${resize};\n          }\n          .disabled > textarea {\n            cursor: not-allowed;\n          }\n          textarea:-webkit-autofill,\n          textarea:-webkit-autofill:hover,\n          textarea:-webkit-autofill:active,\n          textarea:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 30px ${theme.palette.background} inset !important;\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nTextareaComponent.defaultProps = defaultProps\nTextareaComponent.displayName = 'GeistTextarea'\nconst Textarea = withScale(TextareaComponent)\nexport default Textarea\n"
  },
  {
    "path": "components/themes/index.ts",
    "content": "import Themes from './themes'\n\nexport type { GeistUserTheme } from './themes'\nexport type {\n  GeistUIThemes,\n  GeistUIThemesBreakpoints,\n  BreakpointsItem,\n  GeistUIThemesExpressiveness,\n  GeistUIThemesFont,\n  GeistUIThemesLayout,\n  GeistUIThemesPalette,\n} from './presets'\nexport default Themes\n"
  },
  {
    "path": "components/themes/presets/dark.ts",
    "content": "import { GeistUIThemes, GeistUIThemesPalette, GeistUIThemesExpressiveness } from './index'\nimport { defaultFont, defaultBreakpoints, defaultLayout } from './shared'\n\nexport const palette: GeistUIThemesPalette = {\n  accents_1: '#111',\n  accents_2: '#333',\n  accents_3: '#444',\n  accents_4: '#666',\n  accents_5: '#888',\n  accents_6: '#999',\n  accents_7: '#eaeaea',\n  accents_8: '#fafafa',\n  background: '#000',\n  foreground: '#fff',\n  selection: '#f81ce5',\n  secondary: '#888',\n  code: '#79ffe1',\n  border: '#333',\n  error: '#e00',\n  errorLighter: '#f7d4d6',\n  errorLight: '#ff1a1a',\n  errorDark: '#c50000',\n  success: '#0070f3',\n  successLighter: '#d3e5ff',\n  successLight: '#3291ff',\n  successDark: '#0761d1',\n  warning: '#f5a623',\n  warningLighter: '#ffefcf',\n  warningLight: '#f7b955',\n  warningDark: '#ab570a',\n  cyan: '#50e3c2',\n  cyanLighter: '#aaffec',\n  cyanLight: '#79ffe1',\n  cyanDark: '#29bc9b',\n  violet: '#7928ca',\n  violetLighter: '#e3d7fc',\n  violetLight: '#8a63d2',\n  violetDark: '#4c2889',\n  purple: '#f81ce5',\n  alert: '#ff0080',\n  magenta: '#eb367f',\n  link: '#3291ff',\n}\n\nexport const expressiveness: GeistUIThemesExpressiveness = {\n  linkStyle: 'none',\n  linkHoverStyle: 'none',\n  dropdownBoxShadow: '0 0 0 1px #333',\n  scrollerStart: 'rgba(255, 255, 255, 1)',\n  scrollerEnd: 'rgba(255, 255, 255, 0)',\n  shadowSmall: '0 0 0 1px #333',\n  shadowMedium: '0 0 0 1px #333',\n  shadowLarge: '0 0 0 1px #333',\n  portalOpacity: 0.75,\n}\n\nexport const font = defaultFont\n\nexport const breakpoints = defaultBreakpoints\n\nexport const layout = defaultLayout\n\nexport const themes: GeistUIThemes = {\n  type: 'dark',\n  font,\n  layout,\n  palette,\n  breakpoints,\n  expressiveness,\n}\n\nexport default themes\n"
  },
  {
    "path": "components/themes/presets/default.ts",
    "content": "import { GeistUIThemes, GeistUIThemesPalette, GeistUIThemesExpressiveness } from './index'\nimport { defaultFont, defaultBreakpoints, defaultLayout } from './shared'\n\nexport const palette: GeistUIThemesPalette = {\n  accents_1: '#fafafa',\n  accents_2: '#eaeaea',\n  accents_3: '#999',\n  accents_4: '#888',\n  accents_5: '#666',\n  accents_6: '#444',\n  accents_7: '#333',\n  accents_8: '#111',\n  background: '#fff',\n  foreground: '#000',\n  selection: '#79ffe1',\n  secondary: '#666',\n  code: '#f81ce5',\n  border: '#eaeaea',\n  error: '#e00',\n  errorLight: '#ff1a1a',\n  errorLighter: '#f7d4d6',\n  errorDark: '#c50000',\n  success: '#0070f3',\n  successLight: '#3291ff',\n  successLighter: '#d3e5ff',\n  successDark: '#0761d1',\n  warning: '#f5a623',\n  warningLight: '#f7b955',\n  warningLighter: '#ffefcf',\n  warningDark: '#ab570a',\n  cyan: '#50e3c2',\n  cyanLighter: '#aaffec',\n  cyanLight: '#79ffe1',\n  cyanDark: '#29bc9b',\n  violet: '#7928ca',\n  violetLighter: '#e3d7fc',\n  violetLight: '#8a63d2',\n  violetDark: '#4c2889',\n  purple: '#f81ce5',\n  alert: '#ff0080',\n  magenta: '#eb367f',\n  link: '#0070f3',\n}\n\nexport const expressiveness: GeistUIThemesExpressiveness = {\n  linkStyle: 'none',\n  linkHoverStyle: 'none',\n  dropdownBoxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.02)',\n  scrollerStart: 'rgba(255, 255, 255, 1)',\n  scrollerEnd: 'rgba(255, 255, 255, 0)',\n  shadowSmall: '0 5px 10px rgba(0, 0, 0, 0.12)',\n  shadowMedium: '0 8px 30px rgba(0, 0, 0, 0.12)',\n  shadowLarge: '0 30px 60px rgba(0, 0, 0, 0.12)',\n  portalOpacity: 0.25,\n}\n\nexport const font = defaultFont\n\nexport const breakpoints = defaultBreakpoints\n\nexport const layout = defaultLayout\n\nexport const themes: GeistUIThemes = {\n  type: 'light',\n  font,\n  layout,\n  palette,\n  breakpoints,\n  expressiveness,\n}\n\nexport default themes\n"
  },
  {
    "path": "components/themes/presets/index.ts",
    "content": "export interface GeistUIThemesPalette {\n  accents_1: string\n  accents_2: string\n  accents_3: string\n  accents_4: string\n  accents_5: string\n  accents_6: string\n  accents_7: string\n  accents_8: string\n  background: string\n  foreground: string\n  selection: string\n  secondary: string\n  code: string\n  border: string\n  success: string\n  successLighter: string\n  successLight: string\n  successDark: string\n  error: string\n  errorLighter: string\n  errorLight: string\n  errorDark: string\n  warning: string\n  warningLighter: string\n  warningLight: string\n  warningDark: string\n  cyan: string\n  cyanLighter: string\n  cyanLight: string\n  cyanDark: string\n  violet: string\n  violetLighter: string\n  violetLight: string\n  violetDark: string\n  link: string\n  purple: string\n  magenta: string\n  alert: string\n}\n\nexport interface GeistUIThemesExpressiveness {\n  linkStyle: string\n  linkHoverStyle: string\n  dropdownBoxShadow: string\n  scrollerStart: string\n  scrollerEnd: string\n  shadowSmall: string\n  shadowMedium: string\n  shadowLarge: string\n  portalOpacity: number\n}\n\nexport interface GeistUIThemesLayout {\n  gap: string\n  gapNegative: string\n  gapHalf: string\n  gapHalfNegative: string\n  gapQuarter: string\n  gapQuarterNegative: string\n  pageMargin: string\n  pageWidth: string\n  pageWidthWithMargin: string\n  breakpointMobile: string\n  breakpointTablet: string\n  radius: string\n  unit: string\n}\n\nexport interface GeistUIThemesFont {\n  sans: string\n  mono: string\n  prism: string\n}\n\nexport interface BreakpointsItem {\n  min: string\n  max: string\n}\n\nexport interface GeistUIThemesBreakpoints {\n  xs: BreakpointsItem\n  sm: BreakpointsItem\n  md: BreakpointsItem\n  lg: BreakpointsItem\n  xl: BreakpointsItem\n}\n\nexport interface GeistUIThemes {\n  type: string\n  font: GeistUIThemesFont\n  layout: GeistUIThemesLayout\n  palette: GeistUIThemesPalette\n  breakpoints: GeistUIThemesBreakpoints\n  expressiveness: GeistUIThemesExpressiveness\n}\n"
  },
  {
    "path": "components/themes/presets/shared.ts",
    "content": "import { GeistUIThemesBreakpoints, GeistUIThemesFont, GeistUIThemesLayout } from './index'\n\nexport const defaultFont: GeistUIThemesFont = {\n  sans: '\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif',\n  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace',\n  prism:\n    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\"Liberation Mono\", \"Courier New\", monospace',\n}\n\nexport const defaultBreakpoints: GeistUIThemesBreakpoints = {\n  xs: {\n    min: '0',\n    max: '650px',\n  },\n  sm: {\n    min: '650px',\n    max: '900px',\n  },\n  md: {\n    min: '900px',\n    max: '1280px',\n  },\n  lg: {\n    min: '1280px',\n    max: '1920px',\n  },\n  xl: {\n    min: '1920px',\n    max: '10000px',\n  },\n}\n\nexport const defaultLayout: GeistUIThemesLayout = {\n  gap: '16pt',\n  gapNegative: '-16pt',\n  gapHalf: '8pt',\n  gapHalfNegative: '-8pt',\n  gapQuarter: '4pt',\n  gapQuarterNegative: '-4pt',\n  pageMargin: '16pt',\n  pageWidth: '750pt',\n  pageWidthWithMargin: '782pt',\n  breakpointMobile: defaultBreakpoints.xs.max,\n  breakpointTablet: defaultBreakpoints.sm.max,\n  radius: '6px',\n  unit: '16px',\n}\n"
  },
  {
    "path": "components/themes/themes.ts",
    "content": "import { GeistUIThemes } from './presets/index'\nimport type { DeepPartial } from '../utils/types'\nimport lightTheme from './presets/default'\nimport darkTheme from './presets/dark'\n\nexport type GeistUserTheme = DeepPartial<GeistUIThemes> & { type: string }\n\nexport const isObject = (target: unknown) => target && typeof target === 'object'\n\nexport const deepDuplicable = <T extends Record<string, unknown>>(\n  source: T,\n  target: T,\n): T => {\n  if (!isObject(target) || !isObject(source)) return source as T\n\n  const sourceKeys = Object.keys(source) as Array<keyof T>\n  let result = {} as any\n  for (const key of sourceKeys) {\n    const sourceValue = source[key]\n    const targetValue = target[key]\n\n    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {\n      result[key] = targetValue.concat(sourceValue)\n    } else if (isObject(sourceValue) && isObject(targetValue)) {\n      result[key] = deepDuplicable(sourceValue as Record<string, unknown>, {\n        ...(targetValue as Record<string, unknown>),\n      })\n    } else if (targetValue) {\n      result[key] = targetValue\n    } else {\n      result[key] = sourceValue\n    }\n  }\n  return result\n}\n\nconst getPresets = (): Array<GeistUIThemes> => {\n  return [lightTheme, darkTheme]\n}\n\nconst getPresetStaticTheme = (): GeistUIThemes => {\n  return lightTheme\n}\n\nconst isAvailableThemeType = (type?: string): boolean => {\n  if (!type) return false\n  const presetThemes = getPresets()\n  const hasType = presetThemes.find(theme => theme.type === type)\n  return !hasType\n}\n\nconst isPresetTheme = (\n  themeOrType?: GeistUserTheme | GeistUIThemes | string,\n): boolean => {\n  if (!themeOrType) return false\n  const isType = typeof themeOrType === 'string'\n  const type = isType\n    ? (themeOrType as string)\n    : (themeOrType as Exclude<typeof themeOrType, string>).type\n  return !isAvailableThemeType(type)\n}\n\nconst hasUserCustomTheme = (themes: Array<GeistUIThemes> = []): boolean => {\n  return !!themes.find(item => isAvailableThemeType(item.type))\n}\n\nconst create = (base: GeistUIThemes, custom: GeistUserTheme): GeistUIThemes => {\n  if (!isAvailableThemeType(custom.type)) {\n    throw new Error('Duplicate or unavailable theme type')\n  }\n\n  return deepDuplicable(base, custom) as GeistUIThemes\n}\n\nconst createFromDark = (custom: GeistUserTheme) => create(darkTheme, custom)\nconst createFromLight = (custom: GeistUserTheme) => create(lightTheme, custom)\n\nconst Themes = {\n  isPresetTheme,\n  isAvailableThemeType,\n  hasUserCustomTheme,\n  getPresets,\n  getPresetStaticTheme,\n  create,\n  createFromDark,\n  createFromLight,\n}\n\nexport default Themes\n"
  },
  {
    "path": "components/toggle/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Toggle should render correctly 1`] = `\n\"<label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1 * 16px);\n          --toggle-height: calc(0.875 * 16px);\n          width: calc(1.75 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.1875 * 16px) 0 calc(0.1875 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #0070f3;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label>\"\n`;\n\nexports[`Toggle should work with different sizes 1`] = `\n\"<div><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1 * 16px);\n          --toggle-height: calc(0.875 * 16px);\n          width: calc(1.75 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.1875 * 16px) 0 calc(0.1875 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #0070f3;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(0.6 * 16px);\n          --toggle-height: calc(0.525 * 16px);\n          width: calc(1.05 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.11249999999999999 * 16px) 0 calc(0.11249999999999999 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #0070f3;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1.5 * 16px);\n          --toggle-height: calc(1.3125 * 16px);\n          width: calc(2.625 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.28125 * 16px) 0 calc(0.28125 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #0070f3;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1 * 10px);\n          --toggle-height: calc(0.875 * 10px);\n          width: calc(1.75 * 10px);\n          height: var(--toggle-height);\n          padding: calc(0.1875 * 10px) 0 calc(0.1875 * 10px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #0070f3;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label></div>\"\n`;\n\nexports[`Toggle should work with different status 1`] = `\n\"<div><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1 * 16px);\n          --toggle-height: calc(0.875 * 16px);\n          width: calc(1.75 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.1875 * 16px) 0 calc(0.1875 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #666;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1 * 16px);\n          --toggle-height: calc(0.875 * 16px);\n          width: calc(1.75 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.1875 * 16px) 0 calc(0.1875 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #0070f3;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1 * 16px);\n          --toggle-height: calc(0.875 * 16px);\n          width: calc(1.75 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.1875 * 16px) 0 calc(0.1875 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #f5a623;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label><label class=\\\\\"\\\\\"><input type=\\\\\"checkbox\\\\\"><div class=\\\\\"toggle\\\\\"><span class=\\\\\"inner\\\\\"></span></div><style>\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: pointer;\n          --toggle-font-size: calc(1 * 16px);\n          --toggle-height: calc(0.875 * 16px);\n          width: calc(1.75 * 16px);\n          height: var(--toggle-height);\n          padding: calc(0.1875 * 16px) 0 calc(0.1875 * 16px)\n            0;\n          margin: 0 0 0 0;\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: #eaeaea;\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: #fff;\n        }\n\n        .disabled {\n          border-color: #eaeaea;\n          background-color: #fafafa;\n        }\n\n        .disabled > .inner {\n          background-color: #eaeaea;\n        }\n\n        .disabled.checked {\n          border-color: #888;\n          background-color: #888;\n        }\n\n        .checked {\n          background-color: #e00;\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      </style></label></div>\"\n`;\n"
  },
  {
    "path": "components/toggle/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, ReactWrapper } from 'enzyme'\nimport { Toggle } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\nconst expectToggleIsChecked = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.checked').length).not.toBe(0)\n}\n\nconst expectToggleIsUnChecked = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.checked').length).toBe(0)\n}\n\ndescribe('Toggle', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<Toggle />)\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different sizes', () => {\n    const wrapper = mount(\n      <div>\n        <Toggle scale={1} />\n        <Toggle scale={0.2} />\n        <Toggle scale={2} />\n        <Toggle unit=\"10px\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should work with different status', () => {\n    const wrapper = mount(\n      <div>\n        <Toggle type=\"secondary\" />\n        <Toggle type=\"success\" />\n        <Toggle type=\"warning\" />\n        <Toggle type=\"error\" />\n      </div>,\n    )\n    expect(wrapper.html()).toMatchSnapshot()\n  })\n\n  it('should set toggle follow checked prop', async () => {\n    const wrapper = mount(<Toggle initialChecked={true} />)\n    expectToggleIsChecked(wrapper)\n\n    wrapper.setProps({ checked: false })\n    await updateWrapper(wrapper)\n    expectToggleIsUnChecked(wrapper)\n\n    wrapper.setProps({ checked: true })\n    await updateWrapper(wrapper)\n    expectToggleIsChecked(wrapper)\n  })\n\n  it('should trigger events when toggle changed', async () => {\n    let checked = false\n    const changeHandler = jest.fn().mockImplementation(e => (checked = e.target.checked))\n    const wrapper = mount(<Toggle onChange={changeHandler} />)\n\n    wrapper.find('input').simulate('change', {\n      ...nativeEvent,\n      target: { checked: true },\n    })\n    await updateWrapper(wrapper)\n    expectToggleIsChecked(wrapper)\n\n    expect(changeHandler).toHaveBeenCalled()\n    expect(checked).toEqual(true)\n  })\n\n  it('should ignore events when toggle disabled', async () => {\n    const changeHandler = jest.fn()\n    const wrapper = mount(<Toggle onChange={changeHandler} disabled />)\n\n    wrapper.find('input').simulate('change', {\n      ...nativeEvent,\n      target: { checked: true },\n    })\n    await updateWrapper(wrapper)\n    expectToggleIsUnChecked(wrapper)\n\n    expect(changeHandler).not.toHaveBeenCalled()\n  })\n})\n"
  },
  {
    "path": "components/toggle/index.ts",
    "content": "import Toggle from './toggle'\n\nexport type {\n  ToggleProps,\n  ToggleSize,\n  ToggleEvent,\n  ToggleEventTarget,\n  ToggleTypes,\n} from './toggle'\nexport default Toggle\n"
  },
  {
    "path": "components/toggle/styles.ts",
    "content": "import { GeistUIThemesPalette } from '../themes/presets'\nimport { NormalTypes } from '../utils/prop-types'\n\nexport type SelectColor = {\n  bg: string\n}\n\nexport const getColors = (\n  palette: GeistUIThemesPalette,\n  status?: NormalTypes,\n): SelectColor => {\n  const colors: { [key in NormalTypes]: SelectColor } = {\n    default: {\n      bg: palette.success,\n    },\n    secondary: {\n      bg: palette.secondary,\n    },\n    success: {\n      bg: palette.success,\n    },\n    warning: {\n      bg: palette.warning,\n    },\n    error: {\n      bg: palette.error,\n    },\n  }\n\n  if (!status) return colors.default\n  return colors[status]\n}\n"
  },
  {
    "path": "components/toggle/toggle.tsx",
    "content": "import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport useTheme from '../use-theme'\nimport { NormalTypes } from '../utils/prop-types'\nimport { getColors } from './styles'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\nexport type ToggleTypes = NormalTypes\nexport interface ToggleEventTarget {\n  checked: boolean\n}\nexport interface ToggleEvent {\n  target: ToggleEventTarget\n  stopPropagation: () => void\n  preventDefault: () => void\n  nativeEvent: React.ChangeEvent\n}\n\ninterface Props {\n  checked?: boolean\n  initialChecked?: boolean\n  onChange?: (ev: ToggleEvent) => void\n  disabled?: boolean\n  type?: ToggleTypes\n  className?: string\n}\n\nconst defaultProps = {\n  type: 'default' as ToggleTypes,\n  disabled: false,\n  initialChecked: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>\nexport type ToggleProps = Props & NativeAttrs\n\nexport type ToggleSize = {\n  width: string\n  height: string\n}\n\nconst ToggleComponent: React.FC<ToggleProps> = ({\n  initialChecked,\n  checked,\n  disabled,\n  onChange,\n  type,\n  className,\n  ...props\n}: ToggleProps & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const [selfChecked, setSelfChecked] = useState<boolean>(initialChecked)\n  const classes = useClasses('toggle', { checked: selfChecked, disabled })\n\n  const changeHandle = useCallback(\n    (ev: React.ChangeEvent) => {\n      if (disabled) return\n      const selfEvent: ToggleEvent = {\n        target: {\n          checked: !selfChecked,\n        },\n        stopPropagation: ev.stopPropagation,\n        preventDefault: ev.preventDefault,\n        nativeEvent: ev,\n      }\n\n      setSelfChecked(!selfChecked)\n      onChange && onChange(selfEvent)\n    },\n    [disabled, selfChecked, onChange],\n  )\n\n  const { bg } = useMemo(() => getColors(theme.palette, type), [theme.palette, type])\n\n  useEffect(() => {\n    if (checked === undefined) return\n    setSelfChecked(checked)\n  }, [checked])\n\n  return (\n    <label className={className} {...props}>\n      <input\n        type=\"checkbox\"\n        disabled={disabled}\n        checked={selfChecked}\n        onChange={changeHandle}\n      />\n      <div className={classes}>\n        <span className=\"inner\" />\n      </div>\n      <style jsx>{`\n        label {\n          -webkit-tap-highlight-color: transparent;\n          display: inline-block;\n          vertical-align: middle;\n          white-space: nowrap;\n          user-select: none;\n          position: relative;\n          cursor: ${disabled ? 'not-allowed' : 'pointer'};\n          --toggle-font-size: ${SCALES.font(1)};\n          --toggle-height: ${SCALES.height(0.875)};\n          width: ${SCALES.width(1.75)};\n          height: var(--toggle-height);\n          padding: ${SCALES.pt(0.1875)} ${SCALES.pr(0)} ${SCALES.pb(0.1875)}\n            ${SCALES.pl(0)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        input {\n          overflow: hidden;\n          visibility: hidden;\n          height: 0;\n          opacity: 0;\n          width: 0;\n          position: absolute;\n          background-color: transparent;\n          z-index: -1;\n        }\n\n        .toggle {\n          height: var(--toggle-height);\n          width: 100%;\n          border-radius: var(--toggle-height);\n          transition-delay: 0.12s;\n          transition-duration: 0.2s;\n          transition-property: background, border;\n          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n          position: relative;\n          border: 1px solid transparent;\n          background-color: ${theme.palette.accents_2};\n          padding: 0;\n        }\n\n        .inner {\n          width: calc(var(--toggle-height) - 2px);\n          height: calc(var(--toggle-height) - 2px);\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          left: 1px;\n          box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0;\n          transition: left 280ms cubic-bezier(0, 0, 0.2, 1);\n          border-radius: 50%;\n          background-color: ${theme.palette.background};\n        }\n\n        .disabled {\n          border-color: ${theme.palette.accents_2};\n          background-color: ${theme.palette.accents_1};\n        }\n\n        .disabled > .inner {\n          background-color: ${theme.palette.accents_2};\n        }\n\n        .disabled.checked {\n          border-color: ${theme.palette.accents_4};\n          background-color: ${theme.palette.accents_4};\n        }\n\n        .checked {\n          background-color: ${bg};\n        }\n\n        .checked > .inner {\n          left: calc(100% - (var(--toggle-height) - 2px));\n          box-shadow: none;\n        }\n      `}</style>\n    </label>\n  )\n}\n\nToggleComponent.defaultProps = defaultProps\nToggleComponent.displayName = 'GeistToggle'\nconst Toggle = withScale(ToggleComponent)\nexport default Toggle\n"
  },
  {
    "path": "components/tooltip/__test__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, ReactWrapper } from 'enzyme'\nimport { Button, Tooltip, GeistProvider } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport { act } from 'react-dom/test-utils'\n\nconst expectTooltipIsShow = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.inner').length).not.toBe(0)\n}\n\nconst expectTooltipIsHidden = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.inner').length).toBe(0)\n}\n\ndescribe('Tooltip', () => {\n  it('should render correctly', async () => {\n    const wrapper = mount(\n      <GeistProvider themeType=\"dark\">\n        <Tooltip text={<p id=\"test\">custom-content</p>}>some tips</Tooltip>\n      </GeistProvider>,\n    )\n\n    expectTooltipIsHidden(wrapper)\n\n    wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent)\n    await updateWrapper(wrapper, 150)\n    wrapper.find('#test').simulate('click', nativeEvent)\n    expectTooltipIsShow(wrapper)\n\n    await updateWrapper(wrapper, 150)\n    wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectTooltipIsHidden(wrapper)\n  })\n\n  it('should render text when hover it', async () => {\n    const wrapper = mount(\n      <div>\n        <Tooltip text=\"some text\">some tips</Tooltip>\n      </div>,\n    )\n    wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectTooltipIsShow(wrapper)\n\n    wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent)\n    await updateWrapper(wrapper, 350)\n    expectTooltipIsHidden(wrapper)\n  })\n\n  it('should render react-node when click it', async () => {\n    const wrapper = mount(\n      <Tooltip text={<p id=\"test\">custom-content</p>} trigger=\"click\">\n        <span>click me</span>\n      </Tooltip>,\n    )\n    wrapper.find('.tooltip').simulate('click', nativeEvent)\n    await updateWrapper(wrapper, 150)\n    expectTooltipIsShow(wrapper)\n\n    const testNode = wrapper.find('#test')\n    expect(testNode.length).not.toBe(0)\n    expect(testNode.text()).toContain('custom-content')\n    act(() => {\n      document.body.dispatchEvent(\n        new MouseEvent('click', {\n          view: window,\n          bubbles: true,\n          cancelable: true,\n        }),\n      )\n    })\n\n    await updateWrapper(wrapper, 150)\n    expectTooltipIsHidden(wrapper)\n  })\n\n  it('should render inner components', async () => {\n    const wrapper = mount(\n      <Tooltip text=\"some text\" type=\"dark\">\n        <Button auto id=\"test\">\n          button\n        </Button>\n      </Tooltip>,\n    )\n    expect(wrapper.find('#test').length).not.toBe(0)\n  })\n\n  it('should render correctly by visible', async () => {\n    const wrapper = mount(\n      <div>\n        <Tooltip\n          text={<p id=\"visible\">custom-content</p>}\n          visible={true}\n          placement=\"rightEnd\">\n          some tips\n        </Tooltip>\n      </div>,\n    )\n\n    await updateWrapper(wrapper, 150)\n    expect(wrapper.find('#visible').length).toBe(1)\n  })\n\n  it('should render correctly by using wrong placement', async () => {\n    const wrapper = mount(\n      <div>\n        <Tooltip\n          text={<p id=\"initial-visible\">custom-content</p>}\n          initialVisible={true}\n          placement={'test' as any}>\n          some tips\n        </Tooltip>\n      </div>,\n    )\n    expect(wrapper.find('#initial-visible').length).toBe(1)\n  })\n})\n"
  },
  {
    "path": "components/tooltip/helper.ts",
    "content": "import { MutableRefObject } from 'react'\n\nexport interface ReactiveDomReact {\n  top: number\n  bottom: number\n  left: number\n  right: number\n  width: number\n  height: number\n}\n\nconst defaultRect: ReactiveDomReact = {\n  top: -1000,\n  left: -1000,\n  right: -1000,\n  bottom: -1000,\n  width: 0,\n  height: 0,\n}\n\nexport const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact => {\n  if (!ref || !ref.current) return defaultRect\n  const rect = ref.current.getBoundingClientRect()\n  return {\n    ...rect,\n    width: rect.width || rect.right - rect.left,\n    height: rect.height || rect.bottom - rect.top,\n    top: rect.top + document.documentElement.scrollTop,\n    bottom: rect.bottom + document.documentElement.scrollTop,\n    left: rect.left + document.documentElement.scrollLeft,\n    right: rect.right + document.documentElement.scrollLeft,\n  }\n}\n"
  },
  {
    "path": "components/tooltip/index.ts",
    "content": "import Tooltip from './tooltip'\n\nexport type {\n  TooltipProps,\n  TooltipOnVisibleChange,\n  TooltipTypes,\n  TooltipTriggers,\n  TooltipPlacement,\n} from './tooltip'\nexport default Tooltip\n"
  },
  {
    "path": "components/tooltip/placement.ts",
    "content": "import { Placement } from '../utils/prop-types'\n\ninterface ParentDomRect {\n  top: number\n  left: number\n  right: number\n  bottom: number\n  width: number\n  height: number\n}\n\nexport interface TooltipPosition {\n  top: string\n  left: string\n  transform: string\n}\n\nexport const defaultTooltipPosition = {\n  top: '-1000px',\n  left: '-1000px',\n  transform: 'none',\n}\n\nexport interface TooltipIconPosition {\n  top: string\n  left: string\n  right: string\n  bottom: string\n  transform: string\n}\n\nexport const getPosition = (\n  placement: Placement,\n  rect: ParentDomRect,\n  offset: number,\n): TooltipPosition => {\n  const positions: { [key in Placement]: TooltipPosition } = {\n    top: {\n      top: `${rect.top - offset}px`,\n      left: `${rect.left + rect.width / 2}px`,\n      transform: 'translate(-50%, -100%)',\n    },\n    topStart: {\n      top: `${rect.top - offset}px`,\n      left: `${rect.left}px`,\n      transform: 'translate(0, -100%)',\n    },\n    topEnd: {\n      top: `${rect.top - offset}px`,\n      left: `${rect.left + rect.width}px`,\n      transform: 'translate(-100%, -100%)',\n    },\n    bottom: {\n      top: `${rect.bottom + offset}px`,\n      left: `${rect.left + rect.width / 2}px`,\n      transform: 'translate(-50%, 0)',\n    },\n    bottomStart: {\n      top: `${rect.bottom + offset}px`,\n      left: `${rect.left}px`,\n      transform: 'translate(0, 0)',\n    },\n    bottomEnd: {\n      top: `${rect.bottom + offset}px`,\n      left: `${rect.left + rect.width}px`,\n      transform: 'translate(-100%, 0)',\n    },\n    left: {\n      top: `${rect.top + rect.height / 2}px`,\n      left: `${rect.left - offset}px`,\n      transform: 'translate(-100%, -50%)',\n    },\n    leftStart: {\n      top: `${rect.top}px`,\n      left: `${rect.left - offset}px`,\n      transform: 'translate(-100%, 0)',\n    },\n    leftEnd: {\n      top: `${rect.top + rect.height}px`,\n      left: `${rect.left - offset}px`,\n      transform: 'translate(-100%, -100%)',\n    },\n    right: {\n      top: `${rect.top + rect.height / 2}px`,\n      left: `${rect.right + offset}px`,\n      transform: 'translate(0, -50%)',\n    },\n    rightStart: {\n      top: `${rect.top}px`,\n      left: `${rect.right + offset}px`,\n      transform: 'translate(0, 0)',\n    },\n    rightEnd: {\n      top: `${rect.top + rect.height}px`,\n      left: `${rect.right + offset}px`,\n      transform: 'translate(0, -100%)',\n    },\n  }\n  return positions[placement] || (positions.top as TooltipPosition)\n}\n\nexport const getIconPosition = (\n  placement: Placement,\n  offsetX: string,\n  offsetY: string,\n  offsetAbsolute: string = '3px',\n): TooltipIconPosition => {\n  const positions: { [key in Placement]?: TooltipIconPosition } = {\n    top: {\n      top: 'auto',\n      right: 'auto',\n      left: '50%',\n      bottom: `${offsetAbsolute}`,\n      transform: 'translate(-50%, 100%) rotate(-90deg)',\n    },\n    topStart: {\n      top: 'auto',\n      right: 'auto',\n      left: `${offsetX}`,\n      bottom: `${offsetAbsolute}`,\n      transform: 'translate(0, 100%) rotate(-90deg)',\n    },\n    topEnd: {\n      top: 'auto',\n      right: `${offsetX}`,\n      left: 'auto',\n      bottom: `${offsetAbsolute}`,\n      transform: 'translate(0, 100%) rotate(-90deg)',\n    },\n    bottom: {\n      top: `${offsetAbsolute}`,\n      right: 'auto',\n      left: '50%',\n      bottom: 'auto',\n      transform: 'translate(-50%, -100%) rotate(90deg)',\n    },\n    bottomStart: {\n      top: `${offsetAbsolute}`,\n      right: 'auto',\n      left: `${offsetX}`,\n      bottom: 'auto',\n      transform: 'translate(0, -100%) rotate(90deg)',\n    },\n    bottomEnd: {\n      top: `${offsetAbsolute}`,\n      right: `${offsetX}`,\n      left: 'auto',\n      bottom: 'auto',\n      transform: 'translate(0, -100%) rotate(90deg)',\n    },\n    left: {\n      top: '50%',\n      right: '0',\n      left: 'auto',\n      bottom: 'auto',\n      transform: 'translate(100%, -50%) rotate(180deg)',\n    },\n    leftStart: {\n      top: `${offsetY}`,\n      right: '0',\n      left: 'auto',\n      bottom: 'auto',\n      transform: 'translate(100%, -50%) rotate(180deg)',\n    },\n    leftEnd: {\n      top: 'auto',\n      right: '0',\n      left: 'auto',\n      bottom: `${offsetY}`,\n      transform: 'translate(100%, 50%) rotate(180deg)',\n    },\n    right: {\n      top: '50%',\n      right: 'auto',\n      left: '0',\n      bottom: 'auto',\n      transform: 'translate(-100%, -50%) rotate(0deg)',\n    },\n    rightStart: {\n      top: `${offsetY}`,\n      right: 'auto',\n      left: '0',\n      bottom: 'auto',\n      transform: 'translate(-100%, -50%) rotate(0deg)',\n    },\n    rightEnd: {\n      top: 'auto',\n      right: 'auto',\n      left: '0',\n      bottom: `${offsetY}`,\n      transform: 'translate(-100%, 50%) rotate(0deg)',\n    },\n  }\n\n  return positions[placement] || (positions.top as TooltipIconPosition)\n}\n"
  },
  {
    "path": "components/tooltip/styles.ts",
    "content": "import { SnippetTypes } from '../utils/prop-types'\nimport { GeistUIThemesPalette } from '../themes/presets'\n\nexport type TooltipColors = {\n  bgColor: string\n  color: string\n}\n\nexport const getColors = (\n  type: SnippetTypes,\n  palette: GeistUIThemesPalette,\n): TooltipColors => {\n  const colors: { [key in SnippetTypes]: string } = {\n    default: palette.background,\n    success: palette.success,\n    warning: palette.warning,\n    error: palette.error,\n    secondary: palette.secondary,\n    dark: palette.foreground,\n    lite: palette.background,\n  }\n  const color =\n    type === 'lite' || type === 'default' ? palette.foreground : palette.background\n\n  return {\n    color,\n    bgColor: colors[type],\n  }\n}\n"
  },
  {
    "path": "components/tooltip/tooltip-content.tsx",
    "content": "import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport useTheme from '../use-theme'\nimport usePortal from '../utils/use-portal'\nimport useResize from '../utils/use-resize'\nimport CssTransition from '../shared/css-transition'\nimport useClickAnyWhere from '../utils/use-click-anywhere'\nimport { getColors } from './styles'\nimport { getPosition, TooltipPosition, defaultTooltipPosition } from './placement'\nimport TooltipIcon from './tooltip-icon'\nimport { Placement, SnippetTypes } from '../utils/prop-types'\nimport useScale from '../use-scale'\nimport { getRect } from './helper'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  parent?: MutableRefObject<HTMLElement | null> | undefined\n  placement: Placement\n  type: SnippetTypes\n  visible: boolean\n  hideArrow: boolean\n  offset: number\n  className?: string\n  iconOffset: TooltipIconOffset\n}\nexport type TooltipIconOffset = {\n  x: string\n  y: string\n}\n\nconst TooltipContent: React.FC<React.PropsWithChildren<Props>> = ({\n  children,\n  parent,\n  visible,\n  offset,\n  iconOffset,\n  placement,\n  type,\n  className,\n  hideArrow,\n}) => {\n  const theme = useTheme()\n  const { SCALES } = useScale()\n  const el = usePortal('tooltip')\n  const selfRef = useRef<HTMLDivElement>(null)\n  const [rect, setRect] = useState<TooltipPosition>(defaultTooltipPosition)\n  const colors = useMemo(() => getColors(type, theme.palette), [type, theme.palette])\n  const hasShadow = type === 'default'\n  const classes = useClasses('tooltip-content', className)\n  if (!parent) return null\n\n  const updateRect = () => {\n    const position = getPosition(placement, getRect(parent), offset)\n    setRect(position)\n  }\n\n  useResize(updateRect)\n  useClickAnyWhere(() => updateRect())\n\n  useEffect(() => {\n    updateRect()\n  }, [visible])\n\n  const preventHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n    event.stopPropagation()\n    event.nativeEvent.stopImmediatePropagation()\n  }\n\n  if (!el) return null\n  return createPortal(\n    <CssTransition visible={visible}>\n      <div className={classes} ref={selfRef} onClick={preventHandler}>\n        <div className=\"inner\">\n          {!hideArrow && <TooltipIcon placement={placement} shadow={hasShadow} />}\n          {children}\n        </div>\n        <style jsx>{`\n          .tooltip-content {\n            --tooltip-icon-offset-x: ${iconOffset.x};\n            --tooltip-icon-offset-y: ${iconOffset.y};\n            --tooltip-content-bg: ${colors.bgColor};\n            box-sizing: border-box;\n            position: absolute;\n            top: ${rect.top};\n            left: ${rect.left};\n            transform: ${rect.transform};\n            background-color: var(--tooltip-content-bg);\n            color: ${colors.color};\n            border-radius: ${theme.layout.radius};\n            padding: 0;\n            z-index: 1000;\n            box-shadow: ${hasShadow ? theme.expressiveness.shadowMedium : 'none'};\n            width: ${SCALES.width(1, 'auto')};\n            height: ${SCALES.height(1, 'auto')};\n          }\n\n          .inner {\n            box-sizing: border-box;\n            position: relative;\n            font-size: ${SCALES.font(1)};\n            padding: ${SCALES.pt(0.65)} ${SCALES.pr(0.9)} ${SCALES.pb(0.65)}\n              ${SCALES.pl(0.9)};\n            height: 100%;\n          }\n        `}</style>\n      </div>\n    </CssTransition>,\n    el,\n  )\n}\n\nexport default TooltipContent\n"
  },
  {
    "path": "components/tooltip/tooltip-icon.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { getIconPosition } from './placement'\nimport { Placement } from '../utils/prop-types'\nimport useTheme from '../use-theme'\n\ninterface Props {\n  placement: Placement\n  shadow: boolean\n}\n\nconst TooltipIcon: React.FC<Props> = ({ placement, shadow }) => {\n  const theme = useTheme()\n  const { transform, top, left, right, bottom } = useMemo(\n    () =>\n      getIconPosition(\n        placement,\n        'var(--tooltip-icon-offset-x)',\n        'var(--tooltip-icon-offset-y)',\n      ),\n    [placement],\n  )\n  const bgColorWithDark = useMemo(() => {\n    if (!shadow || theme.type !== 'dark') return 'var(--tooltip-content-bg)'\n    return theme.palette.accents_2\n  }, [theme.type, shadow])\n\n  return (\n    <span>\n      <style jsx>{`\n        span {\n          width: 0;\n          height: 0;\n          border-style: solid;\n          border-width: 6px 7px 6px 0;\n          border-color: transparent ${bgColorWithDark} transparent transparent;\n          position: absolute;\n          left: ${left};\n          top: ${top};\n          right: ${right};\n          bottom: ${bottom};\n          transform: ${transform};\n        }\n      `}</style>\n    </span>\n  )\n}\n\nexport default TooltipIcon\n"
  },
  {
    "path": "components/tooltip/tooltip.tsx",
    "content": "import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport TooltipContent, { TooltipIconOffset } from './tooltip-content'\nimport useClickAway from '../utils/use-click-away'\nimport { TriggerTypes, Placement, SnippetTypes } from '../utils/prop-types'\nimport { withScale } from '../use-scale'\nimport { getRect } from './helper'\nimport useClasses from '../use-classes'\n\nexport type TooltipOnVisibleChange = (visible: boolean) => void\nexport type TooltipTypes = SnippetTypes\nexport type TooltipTriggers = TriggerTypes\nexport type TooltipPlacement = Placement\ninterface Props {\n  text: string | React.ReactNode\n  type?: TooltipTypes\n  placement?: TooltipPlacement\n  visible?: boolean\n  initialVisible?: boolean\n  hideArrow?: boolean\n  trigger?: TooltipTriggers\n  enterDelay?: number\n  leaveDelay?: number\n  offset?: number\n  className?: string\n  portalClassName?: string\n  onVisibleChange?: TooltipOnVisibleChange\n}\n\nconst defaultProps = {\n  initialVisible: false,\n  hideArrow: false,\n  type: 'default' as TooltipTypes,\n  trigger: 'hover' as TooltipTriggers,\n  placement: 'top' as TooltipPlacement,\n  enterDelay: 100,\n  leaveDelay: 150,\n  offset: 12,\n  className: '',\n  portalClassName: '',\n  onVisibleChange: (() => {}) as TooltipOnVisibleChange,\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TooltipProps = Props & NativeAttrs\n\nconst TooltipComponent: React.FC<React.PropsWithChildren<TooltipProps>> = ({\n  children,\n  initialVisible,\n  text,\n  offset,\n  placement,\n  portalClassName,\n  enterDelay,\n  leaveDelay,\n  trigger,\n  type,\n  className,\n  onVisibleChange,\n  hideArrow,\n  visible: customVisible,\n  ...props\n}: React.PropsWithChildren<TooltipProps> & typeof defaultProps) => {\n  const timer = useRef<number>()\n  const ref = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(initialVisible)\n  const iconOffset = useMemo<TooltipIconOffset>(() => {\n    if (!ref?.current) return { x: '0.75em', y: '0.75em' }\n    const rect = getRect(ref)\n    return {\n      x: `${rect.width ? rect.width / 2 : 0}px`,\n      y: `${rect.height ? rect.height / 2 : 0}px`,\n    }\n  }, [ref?.current])\n  const contentProps = {\n    type,\n    visible,\n    offset,\n    placement,\n    hideArrow,\n    iconOffset,\n    parent: ref,\n    className: portalClassName,\n  }\n\n  const changeVisible = (nextState: boolean) => {\n    const clear = () => {\n      clearTimeout(timer.current)\n      timer.current = undefined\n    }\n    const handler = (nextState: boolean) => {\n      setVisible(nextState)\n      onVisibleChange(nextState)\n      clear()\n    }\n    clear()\n    if (nextState) {\n      timer.current = window.setTimeout(() => handler(true), enterDelay)\n      return\n    }\n    const leaveDelayWithoutClick = trigger === 'click' ? 0 : leaveDelay\n    timer.current = window.setTimeout(() => handler(false), leaveDelayWithoutClick)\n  }\n\n  const mouseEventHandler = (next: boolean) => trigger === 'hover' && changeVisible(next)\n  const clickEventHandler = () => trigger === 'click' && changeVisible(!visible)\n\n  useClickAway(ref, () => trigger === 'click' && changeVisible(false))\n  useEffect(() => {\n    if (customVisible === undefined) return\n    changeVisible(customVisible)\n  }, [customVisible])\n\n  return (\n    <div\n      ref={ref}\n      className={useClasses('tooltip', className)}\n      onClick={clickEventHandler}\n      onMouseEnter={() => mouseEventHandler(true)}\n      onMouseLeave={() => mouseEventHandler(false)}\n      {...props}>\n      {children}\n      <TooltipContent {...contentProps}>{text}</TooltipContent>\n      <style jsx>{`\n        .tooltip {\n          width: max-content;\n          display: inline-block;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nTooltipComponent.defaultProps = defaultProps\nTooltipComponent.displayName = 'GeistTooltip'\nconst Tooltip = withScale(TooltipComponent)\nexport default Tooltip\n"
  },
  {
    "path": "components/tree/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tree should mount correctly 1`] = `\n<GeistTreeFile\n  className=\"\"\n  level={0}\n  name=\"package.json\"\n  parentPath=\"\"\n/>\n`;\n\nexports[`Tree should mount correctly 2`] = `\n<GeistTreeFolder\n  className=\"\"\n  level={0}\n  name=\"components\"\n  parentPath=\"\"\n/>\n`;\n\nexports[`Tree should mount correctly 3`] = `ReactWrapper {}`;\n"
  },
  {
    "path": "components/tree/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { Tree } from 'components'\nimport { nativeEvent } from 'tests/utils'\nimport { TreeFile } from '../tree'\n\nconst mockFiles: Array<TreeFile> = [\n  {\n    type: 'file',\n    name: 'cs.js',\n  },\n  {\n    type: 'directory',\n    name: 'bin',\n    files: [\n      {\n        type: 'file',\n        name: 'cs.js',\n      },\n    ],\n  },\n  {\n    type: 'directory',\n    name: 'docs',\n    files: [\n      {\n        type: 'file',\n        name: 'controllers.md',\n      },\n      {\n        type: 'file',\n        name: 'es6.md',\n      },\n      {\n        type: 'file',\n        name: 'production.md',\n      },\n      {\n        type: 'file',\n        name: 'views.md',\n      },\n    ],\n  },\n  {\n    type: 'file',\n    name: 'views.md',\n  },\n]\n\ndescribe('Tree', () => {\n  it('should mount correctly', () => {\n    const wrapper = mount(\n      <Tree>\n        <Tree.File name=\"package.json\" />\n        <Tree.Folder name=\"components\">\n          <Tree.File name=\"layout.js\" />\n          <Tree.File name=\"header.js\" />\n        </Tree.Folder>\n        <Tree.File name=\"readme.md\" />\n      </Tree>,\n    )\n    expect(<Tree.File name=\"package.json\" />).toMatchSnapshot()\n    expect(<Tree.Folder name=\"components\" />).toMatchSnapshot()\n    expect(wrapper).toMatchSnapshot()\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should show extra messages', () => {\n    const files = mockFiles.map(item => ({ ...item, extra: 'extra' }))\n    const wrapper = mount(<Tree value={files} />)\n    const firstName = wrapper.find('.name').at(0)\n    expect(firstName.text()).toContain('extra')\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should trigger event when file clicked', () => {\n    const callback = jest.fn()\n    const wrapper = mount(<Tree value={mockFiles} onClick={callback} />)\n    wrapper.find('.file').at(0).simulate('click', nativeEvent)\n    expect(callback).toHaveBeenCalled()\n  })\n\n  it('should be work when value is empty', () => {\n    const wrapper = mount(<Tree value={[]} />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/tree/index.ts",
    "content": "import Tree from './tree'\nimport TreeFile from './tree-file'\nimport TreeFolder from './tree-folder'\n\nexport type TreeComponentType = typeof Tree & {\n  File: typeof TreeFile\n  Folder: typeof TreeFolder\n}\n;(Tree as TreeComponentType).File = TreeFile\n;(Tree as TreeComponentType).Folder = TreeFolder\n\nexport type { TreeProps, TreeFile } from './tree'\nexport default Tree as TreeComponentType\n"
  },
  {
    "path": "components/tree/tree-context.ts",
    "content": "import React from 'react'\n\nexport interface TreeConfig {\n  onFileClick?: (path: string) => void\n  initialExpand: boolean\n  isImperative: boolean\n}\n\nconst defaultContext = {\n  initialExpand: false,\n  isImperative: false,\n}\n\nexport const TreeContext = React.createContext<TreeConfig>(defaultContext)\n\nexport const useTreeContext = (): TreeConfig => React.useContext<TreeConfig>(TreeContext)\n"
  },
  {
    "path": "components/tree/tree-file-icon.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\n\nexport interface TreeFileIconProps {\n  color?: string\n  width?: number\n  height?: number\n}\n\nconst defaultProps = {\n  width: 22,\n  height: 22,\n}\n\nconst TreeFileIcon: React.FC<TreeFileIconProps> = ({\n  color,\n  width,\n  height,\n}: TreeFileIconProps & typeof defaultProps) => {\n  const theme = useTheme()\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n      stroke=\"currentColor\"\n      strokeWidth=\"1\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\">\n      <path d=\"M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z\" />\n      <path d=\"M13 2v7h7\" />\n      <style jsx>{`\n        svg {\n          color: ${color || theme.palette.accents_8};\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nTreeFileIcon.defaultProps = defaultProps\nTreeFileIcon.displayName = 'GeistTreeFileIcon'\nexport default TreeFileIcon\n"
  },
  {
    "path": "components/tree/tree-file.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport TreeFileIcon from './tree-file-icon'\nimport { useTreeContext } from './tree-context'\nimport TreeIndents from './tree-indents'\nimport { makeChildPath, stopPropagation } from './tree-help'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  name: string\n  extra?: string\n  parentPath?: string\n  level?: number\n  className?: string\n}\n\nconst defaultProps = {\n  level: 0,\n  className: '',\n  parentPath: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TreeFileProps = Props & NativeAttrs\n\nconst TreeFile: React.FC<React.PropsWithChildren<TreeFileProps>> = ({\n  name,\n  parentPath,\n  level,\n  extra,\n  className,\n  ...props\n}: React.PropsWithChildren<TreeFileProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { onFileClick } = useTreeContext()\n  const currentPath = useMemo(() => makeChildPath(name, parentPath), [])\n  const clickHandler = (event: React.MouseEvent) => {\n    stopPropagation(event)\n    onFileClick && onFileClick(currentPath)\n  }\n\n  return (\n    <div className={useClasses('file', className)} onClick={clickHandler} {...props}>\n      <div className=\"names\">\n        <TreeIndents count={level} />\n        <span className=\"icon\">\n          <TreeFileIcon />\n        </span>\n        <span className=\"name\">\n          {name}\n          {extra && <span className=\"extra\">{extra}</span>}\n        </span>\n      </div>\n      <style jsx>{`\n        .file {\n          cursor: pointer;\n          line-height: 1;\n          user-select: none;\n          margin-left: calc(1.875rem * ${level});\n        }\n\n        .names {\n          display: flex;\n          height: 1.75rem;\n          align-items: center;\n          position: relative;\n        }\n\n        .names > :global(.indent) {\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          width: 1px;\n          height: 100%;\n          background-color: ${theme.palette.accents_2};\n          margin-left: -1px;\n        }\n\n        .icon {\n          width: 1.5rem;\n          height: 100%;\n          display: inline-flex;\n          align-items: center;\n          margin-right: 0.5rem;\n        }\n\n        .name {\n          transition: opacity 100ms ease 0ms;\n          color: ${theme.palette.accents_8};\n          white-space: nowrap;\n          font-size: 0.875rem;\n        }\n\n        .extra {\n          font-size: 0.75rem;\n          align-self: baseline;\n          padding-left: 4px;\n          color: ${theme.palette.accents_5};\n        }\n\n        .name:hover {\n          opacity: 0.7;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nTreeFile.defaultProps = defaultProps\nTreeFile.displayName = 'GeistTreeFile'\nexport default TreeFile\n"
  },
  {
    "path": "components/tree/tree-folder-icon.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\n\nexport interface TreeFolderIconProps {\n  color?: string\n  width?: number\n  height?: number\n}\n\nconst defaultProps = {\n  width: 22,\n  height: 22,\n}\n\nconst TreeFolderIcon: React.FC<TreeFolderIconProps> = ({\n  color,\n  width,\n  height,\n}: TreeFolderIconProps & typeof defaultProps) => {\n  const theme = useTheme()\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n      stroke=\"currentColor\"\n      strokeWidth=\"1\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\">\n      <path d=\"M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662\" />\n      <style jsx>{`\n        svg {\n          color: ${color || theme.palette.accents_8};\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nTreeFolderIcon.defaultProps = defaultProps\nTreeFolderIcon.displayName = 'GeistTreeFolderIcon'\nexport default TreeFolderIcon\n"
  },
  {
    "path": "components/tree/tree-folder.tsx",
    "content": "import React, { useEffect, useMemo, useState } from 'react'\nimport useTheme from '../use-theme'\nimport { setChildrenProps } from '../utils/collections'\nimport TreeFile from './tree-file'\nimport Expand from '../shared/expand'\nimport TreeIndents from './tree-indents'\nimport { useTreeContext } from './tree-context'\nimport TreeFolderIcon from './tree-folder-icon'\nimport TreeStatusIcon from './tree-status-icon'\nimport { sortChildren, makeChildPath, stopPropagation } from './tree-help'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  name: string\n  extra?: string\n  parentPath?: string\n  level?: number\n  className?: string\n}\n\nconst defaultProps = {\n  level: 0,\n  className: '',\n  parentPath: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TreeFolderProps = Props & NativeAttrs\n\nconst TreeFolder: React.FC<React.PropsWithChildren<TreeFolderProps>> = ({\n  name,\n  children,\n  parentPath,\n  level: parentLevel,\n  extra,\n  className,\n  ...props\n}: React.PropsWithChildren<TreeFolderProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { initialExpand, isImperative } = useTreeContext()\n  const [expanded, setExpanded] = useState<boolean>(initialExpand)\n  useEffect(() => setExpanded(initialExpand), [])\n\n  const currentPath = useMemo(() => makeChildPath(name, parentPath), [])\n  const clickHandler = () => setExpanded(!expanded)\n\n  const nextChildren = setChildrenProps(\n    children,\n    {\n      parentPath: currentPath,\n      level: parentLevel + 1,\n    },\n    [TreeFolder, TreeFile],\n  )\n\n  const sortedChildren = isImperative\n    ? nextChildren\n    : sortChildren(nextChildren, TreeFolder)\n\n  return (\n    <div className={useClasses('folder', className)} onClick={clickHandler} {...props}>\n      <div className=\"names\">\n        <TreeIndents count={parentLevel} />\n        <span className=\"status\">\n          <TreeStatusIcon active={expanded} />\n        </span>\n        <span className=\"icon\">\n          <TreeFolderIcon />\n        </span>\n        <span className=\"name\">\n          {name}\n          {extra && <span className=\"extra\">{extra}</span>}\n        </span>\n      </div>\n      <Expand isExpanded={expanded}>\n        <div className=\"content\" onClick={stopPropagation}>\n          {sortedChildren}\n        </div>\n      </Expand>\n\n      <style jsx>{`\n        .folder {\n          cursor: pointer;\n          line-height: 1;\n          user-select: none;\n        }\n\n        .names {\n          display: flex;\n          height: 1.75rem;\n          align-items: center;\n          margin-left: calc(1.875rem * ${parentLevel});\n          position: relative;\n        }\n\n        .names > :global(.indent) {\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          width: 1px;\n          height: 100%;\n          background-color: ${theme.palette.accents_2};\n          margin-left: -1px;\n        }\n\n        .status {\n          position: absolute;\n          left: calc(-1.125rem);\n          top: 50%;\n          transform: translate(-50%, -50%);\n          width: 0.875rem;\n          height: 0.875rem;\n          z-index: 10;\n          background-color: ${theme.palette.background};\n        }\n\n        .icon {\n          width: 1.5rem;\n          height: 100%;\n          margin-right: 0.5rem;\n        }\n\n        .status,\n        .icon {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .name {\n          transition: opacity 100ms ease 0ms;\n          color: ${theme.palette.accents_8};\n          white-space: nowrap;\n          font-size: 0.875rem;\n        }\n\n        .extra {\n          font-size: 0.75rem;\n          align-self: baseline;\n          padding-left: 4px;\n          color: ${theme.palette.accents_5};\n        }\n\n        .name:hover {\n          opacity: 0.7;\n        }\n\n        .content {\n          display: flex;\n          flex-direction: column;\n          height: auto;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nTreeFolder.defaultProps = defaultProps\nTreeFolder.displayName = 'GeistTreeFolder'\nexport default TreeFolder\n"
  },
  {
    "path": "components/tree/tree-help.ts",
    "content": "import React, { ReactNode } from 'react'\n\nexport const sortChildren = (\n  children: ReactNode | undefined,\n  folderComponentType: React.ElementType,\n) => {\n  return React.Children.toArray(children).sort((a, b) => {\n    if (!React.isValidElement(a) || !React.isValidElement(b)) return 0\n    if (a.type !== b.type) return a.type !== folderComponentType ? 1 : -1\n    return `${a.props.name}`.charCodeAt(0) - `${b.props.name}`.charCodeAt(0)\n  })\n}\n\nexport const makeChildPath = (name: string, parentPath?: string) => {\n  if (!parentPath) return name\n  return `${parentPath}/${name}`\n}\n\nexport const stopPropagation = (event: React.MouseEvent) => {\n  event.stopPropagation()\n  event.nativeEvent.stopImmediatePropagation()\n}\n"
  },
  {
    "path": "components/tree/tree-indents.tsx",
    "content": "import React from 'react'\n\ninterface Props {\n  count: number\n}\n\nconst TreeIndents: React.FC<Props> = ({ count }) => {\n  if (count === 0) return null\n  return (\n    /* eslint-disable react/jsx-no-useless-fragment */\n    <>\n      {[...new Array(count)].map((_, index) => (\n        <span className=\"indent\" key={`indent-${index}`}>\n          <style jsx>{`\n            span.indent {\n              left: calc(-1.875rem * ${index + 1} + 0.75rem);\n            }\n          `}</style>\n        </span>\n      ))}\n    </>\n    /* eslint-enable */\n  )\n}\n\nexport default TreeIndents\n"
  },
  {
    "path": "components/tree/tree-status-icon.tsx",
    "content": "import React from 'react'\nimport useTheme from '../use-theme'\n\nexport interface TreeStatusIconProps {\n  color?: string\n  width?: number\n  height?: number\n  active?: boolean\n}\n\nconst defaultProps = {\n  width: 12,\n  height: 12,\n  active: false,\n}\n\nconst TreeStatusIcon: React.FC<TreeStatusIconProps> = ({\n  color,\n  width,\n  height,\n  active,\n}: TreeStatusIconProps & typeof defaultProps) => {\n  const theme = useTheme()\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\">\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n      {!active && <path d=\"M12 8v8\" />}\n      <path d=\"M8 12h8\" />\n\n      <style jsx>{`\n        svg {\n          color: ${color || theme.palette.accents_8};\n        }\n      `}</style>\n    </svg>\n  )\n}\n\nTreeStatusIcon.defaultProps = defaultProps\nTreeStatusIcon.displayName = 'GeistTreeStatusIcon'\nexport default TreeStatusIcon\n"
  },
  {
    "path": "components/tree/tree.tsx",
    "content": "import React, { useMemo } from 'react'\nimport TreeFile from './tree-file'\nimport TreeFolder from './tree-folder'\nimport { TreeContext } from './tree-context'\nimport { tuple } from '../utils/prop-types'\nimport { sortChildren } from './tree-help'\nimport useClasses from '../use-classes'\n\nconst FileTreeValueType = tuple('directory', 'file')\n\nconst directoryType = FileTreeValueType[0]\n\nexport type TreeFile = {\n  type: typeof FileTreeValueType[number]\n  name: string\n  extra?: string\n  files?: Array<TreeFile>\n}\n\ninterface Props {\n  value?: Array<TreeFile>\n  initialExpand?: boolean\n  onClick?: (path: string) => void\n  className?: string\n}\n\nconst defaultProps = {\n  initialExpand: false,\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type TreeProps = Props & NativeAttrs\n\nconst makeChildren = (value: Array<TreeFile> = []) => {\n  if (!value || !value.length) return null\n  return value\n    .sort((a, b) => {\n      if (a.type !== b.type) return a.type !== directoryType ? 1 : -1\n\n      return `${a.name}`.charCodeAt(0) - `${b.name}`.charCodeAt(0)\n    })\n    .map((item, index) => {\n      if (item.type === directoryType)\n        return (\n          <TreeFolder\n            name={item.name}\n            extra={item.extra}\n            key={`folder-${item.name}-${index}`}>\n            {makeChildren(item.files)}\n          </TreeFolder>\n        )\n      return (\n        <TreeFile\n          name={item.name}\n          extra={item.extra}\n          key={`file-${item.name}-${index}`}\n        />\n      )\n    })\n}\n\nconst Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({\n  children,\n  onClick,\n  initialExpand,\n  value,\n  className,\n  ...props\n}: React.PropsWithChildren<TreeProps> & typeof defaultProps) => {\n  const isImperative = Boolean(value && value.length > 0)\n  const onFileClick = (path: string) => {\n    onClick && onClick(path)\n  }\n\n  const initialValue = useMemo(\n    () => ({\n      onFileClick,\n      initialExpand,\n      isImperative,\n    }),\n    [initialExpand],\n  )\n\n  const customChildren = isImperative\n    ? makeChildren(value)\n    : sortChildren(children, TreeFolder)\n\n  return (\n    <TreeContext.Provider value={initialValue}>\n      <div className={useClasses('tree', className)} {...props}>\n        {customChildren}\n        <style jsx>{`\n          .tree {\n            padding-left: 1.625rem;\n          }\n        `}</style>\n      </div>\n    </TreeContext.Provider>\n  )\n}\n\nTree.defaultProps = defaultProps\nTree.displayName = 'GeistTree'\nexport default Tree\n"
  },
  {
    "path": "components/use-all-themes/all-themes-context.ts",
    "content": "import React from 'react'\nimport Themes from '../themes/themes'\nimport { GeistUIThemes } from '../themes/presets'\n\nexport type AllThemesConfig = {\n  themes: Array<GeistUIThemes>\n}\n\nconst defaultAllThemesConfig = {\n  themes: Themes.getPresets(),\n}\n\nexport const AllThemesContext: React.Context<AllThemesConfig> = React.createContext<AllThemesConfig>(\n  defaultAllThemesConfig,\n)\n\nexport const useAllThemes = (): AllThemesConfig =>\n  React.useContext<AllThemesConfig>(AllThemesContext)\n"
  },
  {
    "path": "components/use-all-themes/index.ts",
    "content": "import { useAllThemes } from './all-themes-context'\n\nexport type { AllThemesConfig } from './all-themes-context'\nexport default useAllThemes\n"
  },
  {
    "path": "components/use-body-scroll/__tests__/body-scroll.test.tsx",
    "content": "import React, { RefObject } from 'react'\nimport { useBodyScroll } from 'components'\nimport { act, renderHook } from '@testing-library/react-hooks'\nimport { sleep } from 'tests/utils'\n\ndescribe('UseBodyScroll', () => {\n  it('should work correctly', () => {\n    const ref = React.createRef<HTMLDivElement>()\n    ;(ref as any).current = document.createElement('div')\n    const { result } = renderHook(() => useBodyScroll(ref))\n    const [hidden, setHidden] = result.current\n    expect(hidden).toBe(false)\n\n    act(() => setHidden(true))\n    expect(result.current[0]).toBe(true)\n  })\n\n  it('should set overflow', async () => {\n    const ref = React.createRef<HTMLDivElement>()\n    ;(ref as any).current = document.createElement('div')\n    const el = ref.current as HTMLDivElement\n    const { result } = renderHook(() => useBodyScroll(ref))\n\n    act(() => result.current[1](true))\n    expect(el.style.overflow).toEqual('hidden')\n\n    act(() => result.current[1](false))\n    await sleep(10)\n    expect(el.style.overflow).not.toEqual('hidden')\n  })\n\n  it('the last value of overflow should be recovered after setHidden', async () => {\n    const ref = React.createRef<HTMLDivElement>()\n    const div = document.createElement('div')\n    div.style.overflow = 'scroll'\n    ;(ref as any).current = div\n    const el = ref.current as HTMLDivElement\n    const { result } = renderHook(() => useBodyScroll(ref))\n    expect(el.style.overflow).toEqual('scroll')\n\n    act(() => result.current[1](true))\n    expect(el.style.overflow).toEqual('hidden')\n\n    act(() => result.current[1](false))\n    await sleep(10)\n    expect(el.style.overflow).toEqual('scroll')\n  })\n\n  it('should work correctly with multiple element', async () => {\n    const ref = React.createRef<HTMLDivElement>()\n    ;(ref as any).current = document.createElement('div')\n    const el = ref.current as HTMLDivElement\n    const { result } = renderHook(() => useBodyScroll(ref))\n\n    const ref2 = React.createRef<HTMLDivElement>()\n    ;(ref2 as any).current = document.createElement('div')\n    const el2 = ref2.current as HTMLDivElement\n    const { result: result2 } = renderHook(() => useBodyScroll(ref2))\n\n    act(() => result.current[1](true))\n    act(() => result2.current[1](true))\n    expect(el.style.overflow).toEqual('hidden')\n    expect(el2.style.overflow).toEqual('hidden')\n\n    act(() => result.current[1](false))\n    act(() => result2.current[1](false))\n    await sleep(10)\n    expect(el.style.overflow).toEqual('')\n    expect(el2.style.overflow).toEqual('')\n  })\n\n  it('should work correctly with options', async () => {\n    const ref = React.createRef<HTMLDivElement>()\n    ;(ref as any).current = document.createElement('div')\n    const el = ref.current as HTMLDivElement\n    const { result } = renderHook(() => useBodyScroll(ref, { delayReset: 300 }))\n\n    act(() => result.current[1](true))\n    expect(el.style.overflow).toEqual('hidden')\n\n    act(() => result.current[1](false))\n    await sleep(10)\n    expect(el.style.overflow).toEqual('hidden')\n    await sleep(100)\n    expect(el.style.overflow).toEqual('hidden')\n    await sleep(250)\n    expect(el.style.overflow).not.toEqual('hidden')\n  })\n\n  it('should work correctly when set element repeatedly', () => {\n    let _ref: RefObject<HTMLDivElement> | null = null\n    const ref = React.createRef<HTMLDivElement>()\n    ;(ref as any).current = document.createElement('div')\n    _ref = ref\n    const el = ref.current as HTMLDivElement\n    const { result, rerender } = renderHook(() => useBodyScroll(_ref))\n\n    act(() => result.current[1](true))\n    expect(el.style.overflow).toEqual('hidden')\n\n    // Force tigger rerender at the same value\n    _ref = React.createRef<HTMLDivElement>()\n    rerender()\n\n    _ref = ref\n    rerender()\n    act(() => result.current[1](true))\n    expect(el.style.overflow).toEqual('hidden')\n  })\n\n  it('should set body when missing all params', () => {\n    const { result } = renderHook(() => useBodyScroll())\n\n    act(() => result.current[1](true))\n    expect(document.body.style.overflow).toEqual('hidden')\n  })\n})\n"
  },
  {
    "path": "components/use-body-scroll/index.ts",
    "content": "import useBodyScroll from './use-body-scroll'\n\nexport type { BodyScrollOptions } from './use-body-scroll'\nexport default useBodyScroll\n"
  },
  {
    "path": "components/use-body-scroll/use-body-scroll.ts",
    "content": "import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react'\n\nexport type ElementStackItem = {\n  overflow: string\n  paddingRight: string\n}\n\nexport type BodyScrollOptions = {\n  scrollLayer?: boolean\n  delayReset?: number\n}\n\nconst defaultOptions: BodyScrollOptions = {\n  scrollLayer: false,\n  delayReset: 0,\n}\n\nconst elementStack = new Map<HTMLElement, ElementStackItem>()\n\nconst getOwnerPaddingRight = (element: Element): number => {\n  const owner = element?.ownerDocument || document\n  const view = owner.defaultView || window\n  return Number.parseInt(view.getComputedStyle(element).paddingRight, 10) || 0\n}\n\nconst getOwnerScrollbarWidth = (element: Element): number => {\n  const doc = element?.ownerDocument || document\n  return Math.abs(window.innerWidth - doc.documentElement.clientWidth)\n}\n\nconst useBodyScroll = (\n  elementRef?: RefObject<HTMLElement> | null,\n  options?: BodyScrollOptions,\n): [boolean, Dispatch<SetStateAction<boolean>>] => {\n  /* istanbul ignore next */\n  if (typeof document === 'undefined') return [false, (t: boolean) => t]\n  const elRef = elementRef || useRef<HTMLElement>(document.body)\n  const [hidden, setHidden] = useState<boolean>(false)\n  const safeOptions = {\n    ...defaultOptions,\n    ...(options || {}),\n  }\n\n  useEffect(() => {\n    if (!elRef || !elRef.current) return\n    const lastOverflow = elRef.current.style.overflow\n    if (hidden) {\n      if (elementStack.has(elRef.current)) return\n      const paddingRight = getOwnerPaddingRight(elRef.current)\n      const scrollbarWidth = getOwnerScrollbarWidth(elRef.current)\n      elementStack.set(elRef.current, {\n        overflow: lastOverflow,\n        paddingRight: elRef.current.style.paddingRight,\n      })\n      elRef.current.style.overflow = 'hidden'\n      elRef.current.style.paddingRight = `${paddingRight + scrollbarWidth}px`\n      return\n    }\n\n    // reset element overflow\n    if (!elementStack.has(elRef.current)) return\n\n    const reset = (el: HTMLElement) => {\n      const store = elementStack.get(el) as ElementStackItem\n      if (!store) return\n      el.style.overflow = store.overflow\n      el.style.paddingRight = store.paddingRight\n      elementStack.delete(el)\n    }\n\n    const timer = window.setTimeout(() => {\n      reset(elRef.current!)\n      window.clearTimeout(timer)\n    }, safeOptions.delayReset)\n  }, [hidden, elRef])\n\n  return [hidden, setHidden]\n}\n\nexport default useBodyScroll\n"
  },
  {
    "path": "components/use-classes/__tests__/index.test.tsx",
    "content": "import { useClasses } from 'components'\nimport { expect } from '@jest/globals'\n\ndescribe('useClasses', () => {\n  it('should be return string always', () => {\n    const str = Math.random().toString()\n    expect(typeof useClasses(str)).toEqual('string')\n    expect(typeof useClasses(true)).toEqual('string')\n    expect(typeof useClasses(null)).toEqual('string')\n    expect(typeof useClasses(undefined)).toEqual('string')\n    expect(typeof useClasses({})).toEqual('string')\n    expect(typeof useClasses(null, undefined)).toEqual('string')\n    expect(typeof useClasses(1, 0)).toEqual('string')\n    expect(typeof useClasses(str, { [str]: true })).toEqual('string')\n  })\n\n  it('should be work correctly with string', () => {\n    const str = Math.random().toString()\n    expect(useClasses()).toEqual('')\n    expect(useClasses(str)).toEqual(str)\n    expect(useClasses('')).toEqual('')\n    expect(useClasses(`${str} ${str}`)).toEqual(`${str} ${str}`)\n  })\n\n  it('should be work correctly with object', () => {\n    expect(\n      useClasses({\n        a: 1,\n        b: false,\n        c: true,\n        d: true,\n      }),\n    ).toEqual('a c d')\n    expect(\n      useClasses({\n        test1: false,\n        test2: false,\n      }),\n    ).toEqual('')\n    expect(\n      useClasses({\n        test1: true,\n        test2: true,\n        test3: null,\n        test4: undefined,\n      }),\n    ).toEqual('test1 test2')\n  })\n\n  it('should be work correctly with combination', () => {\n    expect(useClasses('a', { b: false, c: true }, 'd')).toEqual('a c d')\n    expect(useClasses('a', 0, 1, { b: false, c: true }, 'd')).toEqual('a 1 c d')\n    expect(useClasses({ a: false, b: true }, '')).toEqual('b')\n  })\n\n  it('should be remove spaces before and after', () => {\n    expect(useClasses('  test  ')).toEqual('test')\n    expect(useClasses({ '  a': true })).toEqual('a')\n    expect(`a${useClasses('  b  ', ' c  ', undefined)}d`).toEqual('ab cd')\n  })\n})\n"
  },
  {
    "path": "components/use-classes/index.ts",
    "content": "import { default as useClasses } from './use-classes'\n\nexport default useClasses\n"
  },
  {
    "path": "components/use-classes/use-classes.ts",
    "content": "export type classNamesObject = Record<\n  string,\n  boolean | string | number | null | undefined\n>\nexport type className = string | classNamesObject | null | undefined | boolean | number\n\nconst classObjectToString = (className: classNamesObject) => {\n  const keys = Object.keys(className)\n  const len = keys.length\n  let str = ''\n  for (let index = 0; index < len; index++) {\n    const key = keys[index]\n    const val = className[keys[index]]\n    if (!val) continue\n    str = str ? `${str} ${String(key)}` : String(key)\n  }\n  return str\n}\n\nconst isObjectClassName = (value: className): value is classNamesObject =>\n  typeof value === 'object' && !Array.isArray(value)\n\nconst useClasses = (...classNames: Array<className>): string => {\n  const len = classNames.length\n  let classes = ''\n  if (len === 0) return classes\n  for (let index = 0; index < len; index++) {\n    const val = classNames[index]\n    if (!val) continue\n    if (isObjectClassName(val)) {\n      classes += ` ${classObjectToString(val)}`\n    } else {\n      classes += ` ${String(val).trim()}`\n    }\n  }\n  return classes.trim()\n}\n\nexport default useClasses\n"
  },
  {
    "path": "components/use-click-away/__tests__/click-away.test.tsx",
    "content": "import React from 'react'\nimport { renderHook } from '@testing-library/react-hooks'\nimport { useClickAway } from 'components'\n\nconst simulateNativeClick = (el: Element) => {\n  el.dispatchEvent(\n    new MouseEvent('click', {\n      view: window,\n      bubbles: true,\n      cancelable: true,\n    }),\n  )\n}\n\ndescribe('UseClickAway', () => {\n  it('should work correctly', () => {\n    const handler = jest.fn()\n    const ref = React.createRef() as React.MutableRefObject<HTMLDivElement>\n    ref.current = document.createElement('div')\n    const el = ref.current\n    document.body.appendChild(el)\n    renderHook(() => useClickAway(ref, handler))\n\n    simulateNativeClick(el)\n    expect(handler).not.toHaveBeenCalled()\n    simulateNativeClick(document.body)\n    expect(handler).toHaveBeenCalled()\n  })\n\n  it('should no errors when element missing', () => {\n    const errorSpy = jest.spyOn(console, 'error')\n    const ref = React.createRef<HTMLDivElement>()\n    renderHook(() => useClickAway(ref, () => {}))\n\n    expect(errorSpy).not.toHaveBeenCalled()\n  })\n\n  it('should update handler reference', async () => {\n    const ref = React.createRef() as React.MutableRefObject<HTMLDivElement>\n    ref.current = document.createElement('div')\n    const handler1 = jest.fn()\n    const handler2 = jest.fn()\n    let isFirstRender = true\n    const { rerender } = renderHook(() => {\n      const handler = isFirstRender ? handler1 : handler2\n      useClickAway(ref, handler)\n      isFirstRender = false\n    })\n    simulateNativeClick(document.body)\n    expect(handler1).toHaveBeenCalled()\n\n    rerender()\n    simulateNativeClick(document.body)\n    expect(handler2).toHaveBeenCalled()\n  })\n})\n"
  },
  {
    "path": "components/use-click-away/index.ts",
    "content": "import useClickAway from './use-click-away'\n\nexport default useClickAway\n"
  },
  {
    "path": "components/use-click-away/use-click-away.ts",
    "content": "import { MutableRefObject, useEffect, useRef } from 'react'\n\nexport type ClickAwayGetContainer = () => HTMLElement | null\n\nconst useClickAway = (\n  ref: MutableRefObject<HTMLElement | null>,\n  handler: (event: Event) => void,\n) => {\n  const handlerRef = useRef(handler)\n  useEffect(() => {\n    handlerRef.current = handler\n  }, [handler])\n\n  useEffect(() => {\n    const callback = (event: MouseEvent) => {\n      const el = ref.current\n      if (!event || !el || el.contains(event.target as Node)) return\n      handlerRef.current(event)\n    }\n\n    document.addEventListener('click', callback)\n    return () => document.removeEventListener('click', callback)\n  }, [ref])\n}\n\nexport default useClickAway\n"
  },
  {
    "path": "components/use-clipboard/__tests__/clipboard.test.tsx",
    "content": "import { useClipboard } from 'components'\nimport { renderHook } from '@testing-library/react-hooks'\n\ndescribe('UseClipboard', () => {\n  beforeAll(() => {\n    window.getSelection = jest.fn().mockImplementation(() => ({\n      removeAllRanges: jest.fn(),\n      addRange: jest.fn(),\n    }))\n    document.createRange = jest.fn().mockImplementation(() => ({\n      selectNode: jest.fn(),\n    }))\n  })\n\n  it('should work correctly', () => {\n    document.execCommand = jest.fn()\n    const { result } = renderHook(() => useClipboard())\n    result.current.copy('test')\n    expect(document.execCommand).toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockClear()\n  })\n\n  it('should capture copy erros', () => {\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})\n    document.execCommand = jest.fn().mockImplementation(() => {\n      throw new Error('test')\n    })\n    const { result } = renderHook(() => useClipboard())\n    result.current.copy('space speace breaks $@#')\n\n    expect(errorSpy).toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockClear()\n    errorSpy.mockRestore()\n  })\n\n  it('should work correctly without text', () => {\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})\n    document.execCommand = jest.fn()\n    const { result } = renderHook(() => useClipboard())\n    result.current.copy('')\n    expect(errorSpy).not.toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockClear()\n    errorSpy.mockRestore()\n  })\n\n  it('should not throw errors when the browser does not support', () => {\n    window.getSelection = jest.fn().mockImplementation(() => undefined)\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})\n    document.execCommand = jest.fn()\n    const { result } = renderHook(() => useClipboard())\n    result.current.copy('test')\n    expect(errorSpy).not.toHaveBeenCalled()\n    ;(document.execCommand as jest.Mock).mockClear()\n    ;(window.getSelection as jest.Mock).mockClear()\n    errorSpy.mockRestore()\n  })\n})\n"
  },
  {
    "path": "components/use-clipboard/index.ts",
    "content": "import useClipboard from './use-clipboard'\n\nexport type { UseClipboardOptions, UseClipboardResult } from './use-clipboard'\nexport default useClipboard\n"
  },
  {
    "path": "components/use-clipboard/use-clipboard.ts",
    "content": "import usePortal from '../utils/use-portal'\nimport useWarning from '../utils/use-warning'\nimport { useCallback } from 'react'\n\nexport type UseClipboardOptions = {\n  onError: () => unknown\n}\n\nexport type UseClipboardResult = {\n  copy: (text: string) => void\n}\n\nconst defaultOptions: UseClipboardOptions = {\n  onError: () => useWarning('Failed to copy.', 'use-clipboard'),\n}\n\nconst useClipboard = (\n  options: UseClipboardOptions = defaultOptions,\n): UseClipboardResult => {\n  const el = usePortal('clipboard')\n\n  const copyText = (el: HTMLElement | null, text: string) => {\n    if (!el || !text) return\n    const selection = window.getSelection()\n    if (!selection) return\n\n    el.style.whiteSpace = 'pre'\n    el.textContent = text\n\n    const range = window.document.createRange()\n    selection.removeAllRanges()\n    range.selectNode(el)\n    selection.addRange(range)\n    try {\n      window.document.execCommand('copy')\n    } catch (e) {\n      options.onError && options.onError()\n    }\n\n    selection.removeAllRanges()\n    if (el) {\n      el.textContent = ''\n    }\n  }\n\n  const copy = useCallback(\n    (text: string) => {\n      copyText(el, text)\n    },\n    [el],\n  )\n\n  return { copy }\n}\n\nexport default useClipboard\n"
  },
  {
    "path": "components/use-current-state/__tests__/current-state.test.tsx",
    "content": "import React, { useEffect } from 'react'\nimport { mount } from 'enzyme'\nimport { useCurrentState } from 'components'\nimport { renderHook, act } from '@testing-library/react-hooks'\n\ndescribe('UseCurrentState', () => {\n  it('should work correctly', () => {\n    const { result } = renderHook(() => useCurrentState(''))\n    expect(result.current[0]).toEqual('')\n\n    act(() => result.current[1]('test'))\n    expect(result.current[0]).toEqual('test')\n    expect(result.current[2].current).toEqual('test')\n  })\n\n  it('functional initial mode should be supported', () => {\n    const { result } = renderHook(() => useCurrentState(() => 1 + 1))\n    expect(result.current[0]).toEqual(2)\n    act(() => result.current[1](0))\n    expect(result.current[0]).toEqual(0)\n    expect(result.current[2].current).toEqual(0)\n  })\n\n  it('functional update mode should be supported', () => {\n    const { result } = renderHook(() => useCurrentState(0))\n    expect(result.current[0]).toEqual(0)\n\n    act(() => result.current[1](pre => pre + 10))\n    expect(result.current[0]).toEqual(10)\n    expect(result.current[2].current).toEqual(10)\n  })\n\n  it('only ref should track latest value', () => {\n    const Mock: React.FC<unknown> = () => {\n      const [state, setState, stateRef] = useCurrentState('')\n      useEffect(() => {\n        return () => {\n          setTimeout(() => {\n            expect(state).not.toEqual('test2')\n            expect(stateRef.current).toEqual('test2')\n          }, 0)\n        }\n      }, [])\n      useEffect(() => {\n        setState('test')\n        setState('test2')\n      }, [])\n      return <span />\n    }\n    const wrapper = mount(<Mock />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n})\n"
  },
  {
    "path": "components/use-current-state/index.ts",
    "content": "import useCurrentState from './use-current-state'\n\nexport default useCurrentState\n"
  },
  {
    "path": "components/use-current-state/use-current-state.ts",
    "content": "import {\n  Dispatch,\n  MutableRefObject,\n  SetStateAction,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\n\nexport type CurrentStateType<S> = [S, Dispatch<SetStateAction<S>>, MutableRefObject<S>]\n\nconst useCurrentState = <S>(initialState: S | (() => S)): CurrentStateType<S> => {\n  const [state, setState] = useState<S>(() => {\n    return typeof initialState === 'function' ? (initialState as () => S)() : initialState\n  })\n  const ref = useRef<S>(initialState as S)\n\n  useEffect(() => {\n    ref.current = state\n  }, [state])\n\n  const setValue = (val: SetStateAction<S>) => {\n    const result =\n      typeof val === 'function' ? (val as (prevState: S) => S)(ref.current) : val\n    ref.current = result\n    setState(result)\n  }\n\n  return [state, setValue, ref]\n}\n\nexport default useCurrentState\n"
  },
  {
    "path": "components/use-input/__tests__/use-input.test.tsx",
    "content": "import React, { useEffect } from 'react'\nimport { mount } from 'enzyme'\nimport { Input, useInput } from 'components'\n\ndescribe('UseInput', () => {\n  it('should follow change with use-input', () => {\n    let log = ''\n    const logSpy = jest.spyOn(console, 'log').mockImplementation(msg => (log = msg))\n    const MockInput: React.FC<{ value?: string }> = ({ value }) => {\n      const { state, setState, bindings } = useInput('')\n      useEffect(() => {\n        if (value) setState(value)\n      }, [value])\n      useEffect(() => {\n        if (state) console.log(state)\n      }, [state])\n      return <Input {...bindings} />\n    }\n\n    const wrapper = mount(<MockInput />)\n    wrapper.setProps({ value: 'test' })\n    const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n\n    expect(input.value).toEqual('test')\n    expect(log).toContain('test')\n\n    log = ''\n    wrapper\n      .find('input')\n      .at(0)\n      .simulate('change', { target: { value: 'test-change' } })\n    expect(log).toContain('test-change')\n    logSpy.mockRestore()\n  })\n\n  it('should follow change with use-input', () => {\n    const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({\n      value,\n      resetValue,\n    }) => {\n      const { reset, setState, bindings } = useInput('')\n      useEffect(() => {\n        if (value) setState(value)\n      }, [value])\n      useEffect(() => {\n        if (resetValue) reset()\n      }, [resetValue])\n      return <Input {...bindings} />\n    }\n\n    const wrapper = mount(<MockInput />)\n    wrapper.setProps({ value: 'test' })\n    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.value).toEqual('test')\n\n    wrapper.setProps({ resetValue: true })\n    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement\n    expect(input.value).toEqual('')\n  })\n})\n"
  },
  {
    "path": "components/use-input/index.ts",
    "content": "import useInput from './use-input'\n\nexport type { BindingsChangeTarget } from './use-input'\nexport default useInput\n"
  },
  {
    "path": "components/use-input/use-input.tsx",
    "content": "import React, { Dispatch, MutableRefObject, SetStateAction } from 'react'\nimport useCurrentState from '../utils/use-current-state'\n\nexport type BindingsChangeTarget =\n  | React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  | string\n\nconst useInput = (\n  initialValue: string,\n): {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  reset: () => void\n  bindings: {\n    value: string\n    onChange: (event: BindingsChangeTarget) => void\n  }\n} => {\n  const [state, setState, currentRef] = useCurrentState<string>(initialValue)\n\n  return {\n    state,\n    setState,\n    currentRef,\n    reset: () => setState(initialValue),\n    bindings: {\n      value: state,\n      onChange: (event: BindingsChangeTarget) => {\n        if (typeof event === 'object' && event.target) {\n          setState(event.target.value)\n        } else {\n          setState(event as string)\n        }\n      },\n    },\n  }\n}\n\nexport default useInput\n"
  },
  {
    "path": "components/use-keyboard/__tests__/keyboard.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { useKeyboard, KeyMod, KeyCode } from 'components'\nimport { renderHook, act } from '@testing-library/react-hooks'\nimport { KeyboardResult } from '../use-keyboard'\n\ndescribe('UseKeyboard', () => {\n  it('should work correctly', () => {\n    let code = null\n    const handler = jest.fn().mockImplementation(e => {\n      code = e.keyCode\n    })\n    renderHook(() => useKeyboard(handler, KeyCode.KEY_H))\n    document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_H }))\n    expect(handler).toBeCalledTimes(1)\n    expect(code).toEqual(KeyCode.KEY_H)\n  })\n\n  it('should not trigger handler', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    renderHook(() => useKeyboard(handler, [KeyCode.KEY_0]))\n    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_1 })\n    document.dispatchEvent(event)\n    expect(handler).not.toBeCalled()\n  })\n\n  it('should trigger with command key', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Shift]))\n    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A })\n    document.dispatchEvent(event)\n    expect(handler).not.toBeCalled()\n    const event2 = new KeyboardEvent('keydown', {\n      keyCode: KeyCode.KEY_A,\n      shiftKey: true,\n    })\n    document.dispatchEvent(event2)\n    expect(handler).toBeCalledTimes(1)\n  })\n\n  it('should ignore command when code does not exist', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A, 12345]))\n    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A })\n    document.dispatchEvent(event)\n    expect(handler).toBeCalled()\n  })\n\n  it('should work with each command', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    renderHook(() =>\n      useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Alt, KeyMod.CtrlCmd, KeyMod.WinCtrl]),\n    )\n    document.dispatchEvent(\n      new KeyboardEvent('keydown', {\n        keyCode: KeyCode.KEY_A,\n      }),\n    )\n    expect(handler).not.toBeCalled()\n    document.dispatchEvent(\n      new KeyboardEvent('keydown', {\n        keyCode: KeyCode.KEY_A,\n        altKey: true,\n      }),\n    )\n    expect(handler).not.toBeCalled()\n    document.dispatchEvent(\n      new KeyboardEvent('keydown', {\n        keyCode: KeyCode.KEY_A,\n        altKey: true,\n        ctrlKey: true,\n      }),\n    )\n    expect(handler).not.toBeCalled()\n    document.dispatchEvent(\n      new KeyboardEvent('keydown', {\n        keyCode: KeyCode.KEY_A,\n        altKey: true,\n        ctrlKey: true,\n        metaKey: true,\n      }),\n    )\n    expect(handler).toBeCalledTimes(1)\n  })\n\n  it('should ignore global events', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A], { disableGlobalEvent: true }))\n    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A })\n    document.dispatchEvent(event)\n    expect(handler).not.toBeCalled()\n  })\n\n  it('should respond to different event types', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A], { event: 'keyup' }))\n    document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A }))\n    expect(handler).not.toBeCalled()\n\n    document.dispatchEvent(new KeyboardEvent('keypress', { keyCode: KeyCode.KEY_A }))\n    expect(handler).not.toBeCalled()\n\n    document.dispatchEvent(new KeyboardEvent('keyup', { keyCode: KeyCode.KEY_A }))\n    expect(handler).toBeCalled()\n  })\n\n  it('should pass the keyboard events', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    const nativeHandler = jest.fn().mockImplementation(() => {})\n    const { result } = renderHook<void, KeyboardResult>(() =>\n      useKeyboard(handler, KeyCode.Escape),\n    )\n    const wrapper = mount(\n      <div onKeyDown={nativeHandler}>\n        <span id=\"inner\" {...result.current.bindings} />\n      </div>,\n    )\n    const inner = wrapper.find('#inner').at(0)\n    act(() => {\n      inner.simulate('keyup', {\n        keyCode: KeyCode.Escape,\n      })\n    })\n    expect(handler).not.toBeCalled()\n    expect(nativeHandler).not.toBeCalled()\n    act(() => {\n      inner.simulate('keydown', {\n        keyCode: KeyCode.Escape,\n      })\n    })\n    expect(handler).toBeCalled()\n    expect(nativeHandler).toBeCalled()\n  })\n\n  it('should prevent default events', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    const nativeHandler = jest.fn().mockImplementation(() => {})\n    const { result } = renderHook<void, KeyboardResult>(() =>\n      useKeyboard(handler, KeyCode.Escape, {\n        disableGlobalEvent: true,\n        stopPropagation: true,\n      }),\n    )\n    const wrapper = mount(\n      <div onKeyDown={nativeHandler}>\n        <span id=\"inner\" {...result.current.bindings} />\n      </div>,\n    )\n    const inner = wrapper.find('#inner').at(0)\n    act(() => {\n      inner.simulate('keydown', {\n        keyCode: KeyCode.Escape,\n      })\n    })\n    expect(handler).toBeCalled()\n    expect(nativeHandler).not.toBeCalled()\n  })\n\n  it('should trigger capture event', () => {\n    const handler = jest.fn().mockImplementation(() => {})\n    const { result } = renderHook<void, KeyboardResult>(() =>\n      useKeyboard(handler, KeyCode.Escape, { capture: true, disableGlobalEvent: true }),\n    )\n    const wrapper = mount(\n      <div onKeyDownCapture={result.current.bindings.onKeyDownCapture}>\n        <span id=\"inner\" />\n      </div>,\n    )\n    const inner = wrapper.find('#inner').at(0)\n    act(() => {\n      inner.simulate('keydown', {\n        keyCode: KeyCode.Escape,\n      })\n    })\n    expect(handler).toBeCalled()\n  })\n})\n"
  },
  {
    "path": "components/use-keyboard/codes.ts",
    "content": "/**\n * KeyBinding Codes\n * The content of this file is based on the design of the open source project \"microsoft/vscode\",\n *   Copyright (c) Microsoft Corporation. All rights reserved.\n *\n * We inherit the KeyMod values from \"microsoft/vscode\",\n * but use the Browser's KeyboardEvent event implementation, and all values are used only as identification.\n */\n\nexport enum KeyCode {\n  Unknown = 0,\n  Backspace = 8,\n  Tab = 9,\n  Enter = 13,\n  Shift = 16,\n  Ctrl = 17,\n  Alt = 18,\n  PauseBreak = 19,\n  CapsLock = 20,\n  Escape = 27,\n  Space = 32,\n  PageUp = 33,\n  PageDown = 34,\n  End = 35,\n  Home = 36,\n  LeftArrow = 37,\n  UpArrow = 38,\n  RightArrow = 39,\n  DownArrow = 40,\n  Insert = 45,\n  Delete = 46,\n  KEY_0 = 48,\n  KEY_1 = 49,\n  KEY_2 = 50,\n  KEY_3 = 51,\n  KEY_4 = 52,\n  KEY_5 = 53,\n  KEY_6 = 54,\n  KEY_7 = 55,\n  KEY_8 = 56,\n  KEY_9 = 57,\n  KEY_A = 65,\n  KEY_B = 66,\n  KEY_C = 67,\n  KEY_D = 68,\n  KEY_E = 69,\n  KEY_F = 70,\n  KEY_G = 71,\n  KEY_H = 72,\n  KEY_I = 73,\n  KEY_J = 74,\n  KEY_K = 75,\n  KEY_L = 76,\n  KEY_M = 77,\n  KEY_N = 78,\n  KEY_O = 79,\n  KEY_P = 80,\n  KEY_Q = 81,\n  KEY_R = 82,\n  KEY_S = 83,\n  KEY_T = 84,\n  KEY_U = 85,\n  KEY_V = 86,\n  KEY_W = 87,\n  KEY_X = 88,\n  KEY_Y = 89,\n  KEY_Z = 90,\n  Meta = 91,\n  F1 = 112,\n  F2 = 113,\n  F3 = 114,\n  F4 = 115,\n  F5 = 116,\n  F6 = 117,\n  F7 = 118,\n  F8 = 119,\n  F9 = 120,\n  F10 = 121,\n  F11 = 122,\n  F12 = 123,\n  NumLock = 144,\n  ScrollLock = 145,\n  Equal = 187,\n  Minus = 189,\n  Backquote = 192,\n  Backslash = 220,\n}\n\nexport enum KeyMod {\n  CtrlCmd = (1 << 11) >>> 0,\n  Shift = (1 << 10) >>> 0,\n  Alt = (1 << 9) >>> 0,\n  WinCtrl = (1 << 8) >>> 0,\n}\n"
  },
  {
    "path": "components/use-keyboard/helper.ts",
    "content": "import { isMac } from '../utils/collections'\nimport { KeyMod } from './codes'\n\n/* istanbul ignore next */\nexport const getCtrlKeysByPlatform = (): Record<string, 'metaKey' | 'ctrlKey'> => {\n  return {\n    CtrlCmd: isMac() ? 'metaKey' : 'ctrlKey',\n    WinCtrl: isMac() ? 'ctrlKey' : 'metaKey',\n  }\n}\n\nexport const getActiveModMap = (\n  bindings: number[],\n): Record<keyof typeof KeyMod, boolean> => {\n  const modBindings = bindings.filter((item: number) => !!KeyMod[item])\n  const activeModMap: Record<keyof typeof KeyMod, boolean> = {\n    CtrlCmd: false,\n    Shift: false,\n    Alt: false,\n    WinCtrl: false,\n  }\n  modBindings.forEach(code => {\n    const modKey = KeyMod[code] as keyof typeof KeyMod\n    activeModMap[modKey] = true\n  })\n  return activeModMap\n}\n"
  },
  {
    "path": "components/use-keyboard/index.ts",
    "content": "import useKeyboard from './use-keyboard'\nimport { KeyMod, KeyCode } from './codes'\n\nexport { KeyMod, KeyCode }\nexport type {\n  UseKeyboardHandler,\n  KeyboardOptions,\n  KeyboardResult,\n  UseKeyboard,\n} from './use-keyboard'\nexport default useKeyboard\n"
  },
  {
    "path": "components/use-keyboard/use-keyboard.ts",
    "content": "import { KeyMod } from './codes'\nimport React, { useEffect } from 'react'\nimport { getActiveModMap, getCtrlKeysByPlatform } from './helper'\n\nexport type KeyboardOptions = {\n  disableGlobalEvent?: boolean\n  stopPropagation?: boolean\n  preventDefault?: boolean\n  capture?: boolean\n  event?: 'keydown' | 'keypress' | 'keyup'\n}\n\nexport type KeyboardResult = {\n  bindings: {\n    onKeyDown: React.KeyboardEventHandler\n    onKeyDownCapture: React.KeyboardEventHandler\n    onKeyPress: React.KeyboardEventHandler\n    onKeyPressCapture: React.KeyboardEventHandler\n    onKeyUp: React.KeyboardEventHandler\n    onKeyUpCapture: React.KeyboardEventHandler\n  }\n}\n\nexport type UseKeyboardHandler = (event: React.KeyboardEvent | KeyboardEvent) => void\n\nexport type UseKeyboard = (\n  handler: UseKeyboardHandler,\n  keyBindings: Array<number> | number,\n  options?: KeyboardOptions,\n) => KeyboardResult\n\nconst useKeyboard: UseKeyboard = (handler, keyBindings, options = {}) => {\n  const bindings = Array.isArray(keyBindings) ? (keyBindings as number[]) : [keyBindings]\n  const {\n    disableGlobalEvent = false,\n    capture = false,\n    stopPropagation = false,\n    preventDefault = true,\n    event = 'keydown',\n  } = options\n  const activeModMap = getActiveModMap(bindings)\n  const keyCode = bindings.filter((item: number) => !KeyMod[item])\n  const { CtrlCmd, WinCtrl } = getCtrlKeysByPlatform()\n\n  const eventHandler = (event: React.KeyboardEvent | KeyboardEvent) => {\n    if (activeModMap.Shift && !event.shiftKey) return\n    if (activeModMap.Alt && !event.altKey) return\n    if (activeModMap.CtrlCmd && !event[CtrlCmd]) return\n    if (activeModMap.WinCtrl && !event[WinCtrl]) return\n    const hitOne = keyCode.find(k => k === event.keyCode)\n    if (keyCode && !hitOne) return\n    if (stopPropagation) {\n      event.stopPropagation()\n    }\n    if (preventDefault) {\n      event.preventDefault()\n    }\n    handler && handler(event)\n  }\n\n  useEffect(() => {\n    if (!disableGlobalEvent) {\n      document.addEventListener(event, eventHandler)\n    }\n    return () => {\n      document.removeEventListener(event, eventHandler)\n    }\n  }, [disableGlobalEvent])\n\n  const elementBindingHandler = (\n    elementEventType: 'keydown' | 'keypress' | 'keyup',\n    isCapture: boolean = false,\n  ) => {\n    if (elementEventType !== event) return () => {}\n    if (isCapture !== capture) return () => {}\n    return (e: React.KeyboardEvent) => eventHandler(e)\n  }\n\n  return {\n    bindings: {\n      onKeyDown: elementBindingHandler('keydown'),\n      onKeyDownCapture: elementBindingHandler('keydown', true),\n      onKeyPress: elementBindingHandler('keypress'),\n      onKeyPressCapture: elementBindingHandler('keypress', true),\n      onKeyUp: elementBindingHandler('keyup'),\n      onKeyUpCapture: elementBindingHandler('keyup', true),\n    },\n  }\n}\n\nexport default useKeyboard\n"
  },
  {
    "path": "components/use-media-query/__tests__/media-query.test.tsx",
    "content": "import { useMediaQuery } from 'components'\nimport { renderHook } from '@testing-library/react-hooks'\n// @ts-ignore\nimport mediaQuery from 'css-mediaquery'\n\nconst mediaListMock = (width: number) => {\n  ;(window as any).listeners = [] as Array<() => unknown>\n  return (query: string) => {\n    return {\n      matches: mediaQuery.match(query, { width }),\n      addListener: (fn: () => unknown) => (window as any).listeners.push(fn),\n      removeListener: () => {},\n    }\n  }\n}\n\ndescribe('UseMediaQuery with SSR', () => {\n  beforeAll(() => {\n    ;(window as any).matchMedia = undefined\n  })\n\n  it('should work correctly', () => {\n    const { result } = renderHook(() => useMediaQuery('xs'))\n    expect(result.current).toEqual(false)\n  })\n\n  it('should work correctly with ssr match', () => {\n    const ssrMatchMedia = (query: string) => ({\n      matches: mediaQuery.match(query, {\n        width: '100px',\n      }),\n    })\n    const { result } = renderHook(() =>\n      useMediaQuery('xs', {\n        ssrMatchMedia,\n      }),\n    )\n    expect(result.current).toEqual(true)\n\n    const { result: result2 } = renderHook(() =>\n      useMediaQuery('sm', {\n        ssrMatchMedia,\n      }),\n    )\n    expect(result2.current).toEqual(false)\n  })\n})\n\ndescribe('UseMediaQuery', () => {\n  beforeAll(() => {\n    ;(window as any).matchMedia = mediaListMock(1500)\n  })\n\n  it('should work correctly', () => {\n    const { result } = renderHook(() => useMediaQuery('xs'))\n    expect(result.current).toEqual(false)\n  })\n\n  it('should hit', () => {\n    const { result } = renderHook(() => useMediaQuery('lg'))\n    expect(result.current).toEqual(true)\n  })\n\n  it('different match types should be supported', () => {\n    const { result } = renderHook(() =>\n      useMediaQuery('md', {\n        match: 'up',\n      }),\n    )\n    expect(result.current).toEqual(true)\n    const { result: result2 } = renderHook(() =>\n      useMediaQuery('md', {\n        match: 'down',\n      }),\n    )\n    expect(result2.current).toEqual(false)\n  })\n})\n"
  },
  {
    "path": "components/use-media-query/index.ts",
    "content": "import useMediaQuery from './use-media-query'\n\nexport type { ResponsiveBreakpoint, ResponsiveOptions } from './use-media-query'\nexport default useMediaQuery\n"
  },
  {
    "path": "components/use-media-query/use-media-query.ts",
    "content": "import { useEffect, useMemo, useState } from 'react'\nimport useTheme from '../use-theme'\nimport { tuple } from '../utils/prop-types'\nimport { BreakpointsItem, GeistUIThemesBreakpoints } from '../themes/presets'\n\nconst breakpoints = tuple('xs', 'sm', 'md', 'lg', 'xl', 'mobile')\nexport type ResponsiveBreakpoint = typeof breakpoints[number]\n\nconst matchType = tuple('up', 'down', 'default')\nexport type ResponsiveMatchType = typeof matchType[number]\nexport type ResponsiveOptions = {\n  match?: ResponsiveMatchType\n  ssrMatchMedia?: (query: string) => { matches: boolean }\n}\n\nconst defaultResponsiveOptions = {\n  match: 'default' as ResponsiveMatchType,\n}\n\nconst makeQueries = (\n  bp: GeistUIThemesBreakpoints,\n  up: boolean,\n  down: boolean,\n): {\n  [key in ResponsiveBreakpoint]: string\n} => {\n  const queryString = (item: BreakpointsItem) => {\n    const upQuery = `(min-width: ${item.min})`\n    const downQuery = `(max-width: ${item.max})`\n    return up ? upQuery : down ? downQuery : `${upQuery} and ${downQuery}`\n  }\n  const xs = queryString(bp.xs)\n  return {\n    xs: xs,\n    mobile: xs,\n    sm: queryString(bp.sm),\n    md: queryString(bp.md),\n    lg: queryString(bp.lg),\n    xl: queryString(bp.xl),\n  }\n}\n\nconst useMediaQuery = (\n  breakpoint: ResponsiveBreakpoint,\n  options: ResponsiveOptions = defaultResponsiveOptions,\n) => {\n  const { match: matchType = 'default', ssrMatchMedia = null } = options\n  const supportMedia =\n    typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined'\n\n  const theme = useTheme()\n  const mediaQueries: {\n    [key in ResponsiveBreakpoint]: string\n  } = useMemo(() => {\n    const up = matchType === 'up'\n    const down = matchType === 'down'\n    return makeQueries(theme.breakpoints, up, down)\n  }, [theme.breakpoints, options])\n  const query = useMemo(() => mediaQueries[breakpoint], [mediaQueries, breakpoint])\n  const matchQuery = (q: string) => window.matchMedia(q)\n\n  /**\n   * Do nothing in the server-side rendering.\n   * If server match query fucntion is simulated, return user-defined value first.\n   */\n  const [state, setState] = useState<boolean>(() => {\n    if (supportMedia) return matchQuery(query).matches\n    if (ssrMatchMedia && typeof ssrMatchMedia === 'function') {\n      return ssrMatchMedia(query).matches\n    }\n    return false\n  })\n\n  useEffect(() => {\n    if (!supportMedia) return\n    const queryList = matchQuery(query)\n    const update = () => setState(matchQuery(query).matches)\n    update()\n\n    /**\n     * addListener is deprecated. EventTarget.addEventListener is recommended.\n     * But in some old browsers, MediaQueryList does not inherit from EventTarget.\n     */\n    queryList.addListener(update)\n    return () => {\n      queryList.removeListener(update)\n    }\n  }, [supportMedia])\n\n  return state\n}\n\nexport default useMediaQuery\n"
  },
  {
    "path": "components/use-modal/__tests__/use-modal.test.tsx",
    "content": "import React, { useEffect } from 'react'\nimport { mount, ReactWrapper } from 'enzyme'\nimport { Modal, useModal } from 'components'\nimport { updateWrapper } from 'tests/utils'\n\nexport const expectModalIsOpened = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.position').length).not.toBe(0)\n}\n\nexport const expectModalIsClosed = (wrapper: ReactWrapper) => {\n  expect(wrapper.find('.position').length).toBe(0)\n}\n\ndescribe('UseModal', () => {\n  it('should follow change with use-modal', async () => {\n    const MockModal: React.FC<{ show?: boolean }> = ({ show }) => {\n      const { setVisible, bindings } = useModal()\n      useEffect(() => {\n        if (show !== undefined) setVisible(show)\n      }, [show])\n      return (\n        <Modal {...bindings}>\n          <Modal.Title>Modal</Modal.Title>\n        </Modal>\n      )\n    }\n\n    const wrapper = mount(<MockModal />)\n    wrapper.setProps({ show: true })\n    await updateWrapper(wrapper, 300)\n    expectModalIsOpened(wrapper)\n\n    wrapper.setProps({ show: false })\n    await updateWrapper(wrapper, 500)\n    expectModalIsClosed(wrapper)\n  })\n})\n"
  },
  {
    "path": "components/use-modal/index.ts",
    "content": "import useModal from './use-modal'\n\nexport type { ModalHooksBindings } from './use-modal'\nexport default useModal\n"
  },
  {
    "path": "components/use-modal/use-modal.ts",
    "content": "import { Dispatch, MutableRefObject, SetStateAction } from 'react'\nimport useCurrentState from '../utils/use-current-state'\nimport { ModalProps } from '../modal'\n\nexport type ModalHooksBindings = Pick<ModalProps, 'visible' | 'onClose'>\n\nconst useModal = (\n  initialVisible: boolean = false,\n): {\n  visible: boolean\n  setVisible: Dispatch<SetStateAction<boolean>>\n  currentRef: MutableRefObject<boolean>\n  bindings: ModalHooksBindings\n} => {\n  const [visible, setVisible, currentRef] = useCurrentState<boolean>(initialVisible)\n\n  return {\n    visible,\n    setVisible,\n    currentRef,\n    bindings: {\n      visible,\n      onClose: () => setVisible(false),\n    },\n  }\n}\n\nexport default useModal\n"
  },
  {
    "path": "components/use-scale/__tests__/scale.test.tsx",
    "content": "import React from 'react'\nimport useScale, { ScaleProps, ScaleConfig, withScale } from '../index'\nimport { renderHook } from '@testing-library/react-hooks'\nimport { mount } from 'enzyme'\n\nconst BaseComponent: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (\n  <div>{children}</div>\n)\nconst ScaleComponent = withScale(BaseComponent)\n\ndescribe('UseScale', () => {\n  it('should work correctly', () => {\n    const { result } = renderHook<void, ScaleConfig>(() => useScale())\n    const { SCALES, getScaleProps } = result.current\n    expect(typeof SCALES).toEqual('object')\n    expect(typeof getScaleProps).toEqual('function')\n    expect(getScaleProps('font')).toBeUndefined()\n    expect(SCALES.font(1)).not.toBeUndefined()\n  })\n\n  it('should work correctly with HOC', () => {\n    const wrapper: React.FC<{ width: string }> = ({ width, children }) => (\n      <ScaleComponent width={width}>{children}</ScaleComponent>\n    )\n    const { result, rerender } = renderHook<{ width: string }, ScaleConfig>(\n      () => useScale(),\n      {\n        wrapper,\n        initialProps: { width: '20px' },\n      },\n    )\n    let { SCALES, getScaleProps } = result.current\n    expect(typeof SCALES).toEqual('object')\n    expect(typeof getScaleProps).toEqual('function')\n    expect(getScaleProps('font')).toBeUndefined()\n    expect(getScaleProps('width')).toEqual('20px')\n    rerender({ width: '1rem' })\n    getScaleProps = result.current.getScaleProps\n    expect(getScaleProps('width')).toEqual('1rem')\n  })\n\n  it('should work correctly with SCALES', () => {\n    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (\n      <ScaleComponent {...props}>{children}</ScaleComponent>\n    )\n    const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {\n      wrapper,\n      initialProps: {},\n    })\n    let SCALES = result.current.SCALES\n    expect(SCALES.font(1)).toEqual('calc(1 * 16px)')\n    expect(SCALES.font(1, 'auto')).toEqual('auto')\n\n    rerender({ font: '20px' })\n    SCALES = result.current.SCALES\n    expect(SCALES.font(1)).toEqual('20px')\n    expect(SCALES.font(1, 'auto')).toEqual('20px')\n\n    rerender({ scale: 2 })\n    SCALES = result.current.SCALES\n    expect(SCALES.font(1)).toContain('calc')\n    expect(SCALES.font(1, 'auto')).toEqual('auto')\n\n    rerender({ scale: 0 })\n    SCALES = result.current.SCALES\n    expect(SCALES.font(1)).toContain('calc')\n    expect(SCALES.font(0)).toEqual('0')\n\n    rerender({ unit: '100px' })\n    SCALES = result.current.SCALES\n    expect(SCALES.font(1)).toContain('100px')\n    expect(SCALES.font(10, 'auto')).toEqual('auto')\n  })\n\n  it('aliases should be allowed', () => {\n    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (\n      <ScaleComponent {...props}>{children}</ScaleComponent>\n    )\n    const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {\n      wrapper,\n      initialProps: { w: '200px' },\n    })\n    let SCALES = result.current.SCALES\n    expect(SCALES.width(2)).toEqual('200px')\n    expect(SCALES.width(0, 'auto')).toEqual('200px')\n\n    rerender({ ml: '10px', mb: '10px', pl: '20px', pt: '20px' })\n    SCALES = result.current.SCALES\n    expect(SCALES.ml(1)).toEqual('10px')\n    expect(SCALES.mx(1)).toEqual('10px')\n    expect(SCALES.my(1)).toEqual('10px')\n    expect(SCALES.px(1)).toEqual('20px')\n    expect(SCALES.py(1)).toEqual('20px')\n\n    rerender({ margin: '20px', padding: '10px', h: '100px' })\n    SCALES = result.current.SCALES\n    expect(SCALES.ml(1)).toEqual('20px')\n    expect(SCALES.mx(1)).toEqual('20px')\n    expect(SCALES.my(1)).toEqual('20px')\n    expect(SCALES.px(1)).toEqual('10px')\n    expect(SCALES.py(1)).toEqual('10px')\n    expect(SCALES.height(1)).toEqual('100px')\n  })\n\n  it('should work correctly with different unit', () => {\n    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (\n      <ScaleComponent {...props}>{children}</ScaleComponent>\n    )\n    const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {\n      wrapper,\n      initialProps: { unit: '19px' },\n    })\n    let SCALES = result.current.SCALES\n    let width = SCALES.width(2)\n    expect(width).toContain('19px')\n    expect(width).toContain('calc')\n    rerender({ unit: '3px' })\n    SCALES = result.current.SCALES\n    width = SCALES.width(10)\n    expect(width).toContain('3px')\n    expect(width).toContain('calc')\n  })\n\n  it('should work correctly with multiple values', () => {\n    const wrapper: React.FC<ScaleProps> = ({ children, ...props }) => (\n      <ScaleComponent {...props}>{children}</ScaleComponent>\n    )\n    const { result, rerender } = renderHook<ScaleProps, ScaleConfig>(() => useScale(), {\n      wrapper,\n      initialProps: { height: '2', width: 2 },\n    })\n    let { SCALES, getScaleProps } = result.current\n    let hasWidthOrHeight = getScaleProps(['width', 'height'])\n    expect(hasWidthOrHeight).not.toBeUndefined()\n    const hasMargin = getScaleProps(['margin', 'mx', 'my'])\n    expect(hasMargin).toBeUndefined()\n    expect(SCALES.width(1)).toContain('calc')\n    expect(SCALES.height(1)).toContain('calc')\n\n    rerender({ height: undefined, width: undefined })\n    hasWidthOrHeight = result.current.getScaleProps(['width', 'height'])\n    expect(hasWidthOrHeight).toBeUndefined()\n  })\n\n  it('scale related props should be filtered out', () => {\n    const PassedComponent: React.FC<\n      React.PropsWithChildren<React.HTMLAttributes<any>>\n    > = ({ children, ...props }) => (\n      <div id=\"inner\" {...props}>\n        {children}\n      </div>\n    )\n    let Component = withScale(PassedComponent)\n    let wrapper = mount(<Component scale={2} />)\n    let inner = wrapper.find('#inner').getDOMNode()\n    expect(inner.hasAttribute('scale')).toBe(false)\n\n    const FilteredComponent: React.FC<\n      React.PropsWithChildren<React.HTMLAttributes<any>>\n    > = ({ children, ...props }) => (\n      <div id=\"inner\" {...props}>\n        {children}\n      </div>\n    )\n    Component = withScale(FilteredComponent)\n    wrapper = mount(<Component scale={2} />)\n    inner = wrapper.find('#inner').getDOMNode()\n    expect(inner.hasAttribute('scale')).not.toBe(true)\n  })\n\n  it('should be update all native scale props', () => {\n    const wrapper: React.FC<any> = ({ children, ...props }) => (\n      <ScaleComponent {...props}>{children}</ScaleComponent>\n    )\n    const { result, rerender } = renderHook<any, ScaleConfig>(() => useScale(), {\n      wrapper,\n      initialProps: {},\n    })\n    let { SCALES, getAllScaleProps } = result.current\n    expect(typeof SCALES).toEqual('object')\n    expect(typeof getAllScaleProps).toEqual('function')\n    expect(typeof getAllScaleProps()).toEqual('object')\n\n    rerender({ width: '1em', height: '2em' })\n    getAllScaleProps = result.current.getAllScaleProps\n    expect(getAllScaleProps().width).toEqual('1em')\n    expect(getAllScaleProps().height).toEqual('2em')\n    expect(typeof getAllScaleProps().font).toEqual('undefined')\n\n    rerender({ px: '10px', mx: '20px' })\n    getAllScaleProps = result.current.getAllScaleProps\n    expect(getAllScaleProps().px).toEqual('10px')\n    expect(getAllScaleProps().mx).toEqual('20px')\n    expect(typeof getAllScaleProps().paddingTop).toEqual('undefined')\n  })\n})\n"
  },
  {
    "path": "components/use-scale/index.ts",
    "content": "import withScale from './with-scale'\nimport { useScale } from './scale-context'\nexport * from './utils'\nexport * from './scale-context'\n\nexport default useScale\nexport { withScale }\n"
  },
  {
    "path": "components/use-scale/scale-context.ts",
    "content": "import React from 'react'\n\nexport const ScalePropKeys = [\n  'width',\n  'height',\n  'padding',\n  'margin',\n  'w',\n  'h',\n  'paddingLeft',\n  'paddingRight',\n  'paddingTop',\n  'paddingBottom',\n  'pl',\n  'pr',\n  'pt',\n  'pb',\n  'marginLeft',\n  'marginRight',\n  'marginTop',\n  'marginBottom',\n  'ml',\n  'mr',\n  'mt',\n  'mb',\n  'px',\n  'py',\n  'mx',\n  'my',\n  'font',\n  'unit',\n  'scale',\n]\n\nexport type ScaleProps = {\n  width?: string | number\n  height?: string | number\n  padding?: string | number\n  margin?: string | number\n  w?: string | number\n  h?: string | number\n  paddingLeft?: string | number\n  paddingRight?: string | number\n  paddingTop?: string | number\n  paddingBottom?: string | number\n  pl?: string | number\n  pr?: string | number\n  pt?: string | number\n  pb?: string | number\n  marginLeft?: string | number\n  marginRight?: string | number\n  marginTop?: string | number\n  marginBottom?: string | number\n  ml?: string | number\n  mr?: string | number\n  mt?: string | number\n  mb?: string | number\n  px?: string | number\n  py?: string | number\n  mx?: string | number\n  my?: string | number\n  font?: string | number\n  unit?: string\n  scale?: number\n}\n\nexport type DynamicLayoutPipe = (\n  scale1x: number,\n  defaultValue?: string | number,\n) => string\n\nexport type ScaleInputKeys =\n  | 'pl'\n  | 'pr'\n  | 'pt'\n  | 'pb'\n  | 'px'\n  | 'py'\n  | 'ml'\n  | 'mr'\n  | 'mt'\n  | 'mb'\n  | 'mx'\n  | 'my'\n  | 'width'\n  | 'height'\n  | 'font'\n\nexport type DynamicScales = {\n  [key in ScaleInputKeys]: DynamicLayoutPipe\n}\n\nexport type GetScalePropsFunction = (\n  key: keyof ScaleProps | Array<keyof ScaleProps>,\n) => ScaleProps[keyof ScaleProps]\n\nexport type GetAllScalePropsFunction = () => ScaleProps\n\nexport interface ScaleConfig {\n  SCALES: DynamicScales\n  getScaleProps: GetScalePropsFunction\n  getAllScaleProps: GetAllScalePropsFunction\n  unit: string\n}\n\nconst defaultDynamicLayoutPipe: DynamicLayoutPipe = scale1x => {\n  return `${scale1x}`\n}\n\nconst defaultContext: ScaleConfig = {\n  getScaleProps: () => undefined,\n  getAllScaleProps: () => ({}),\n  SCALES: {\n    pl: defaultDynamicLayoutPipe,\n    pr: defaultDynamicLayoutPipe,\n    pb: defaultDynamicLayoutPipe,\n    pt: defaultDynamicLayoutPipe,\n    px: defaultDynamicLayoutPipe,\n    py: defaultDynamicLayoutPipe,\n    mb: defaultDynamicLayoutPipe,\n    ml: defaultDynamicLayoutPipe,\n    mr: defaultDynamicLayoutPipe,\n    mt: defaultDynamicLayoutPipe,\n    mx: defaultDynamicLayoutPipe,\n    my: defaultDynamicLayoutPipe,\n    width: defaultDynamicLayoutPipe,\n    height: defaultDynamicLayoutPipe,\n    font: defaultDynamicLayoutPipe,\n  },\n  unit: '16px',\n}\n\nexport const ScaleContext = React.createContext<ScaleConfig>(defaultContext)\n\nexport const useScale = (): ScaleConfig => React.useContext<ScaleConfig>(ScaleContext)\n"
  },
  {
    "path": "components/use-scale/utils.ts",
    "content": "import {\n  GetAllScalePropsFunction,\n  GetScalePropsFunction,\n  ScaleProps,\n  ScalePropKeys,\n} from './scale-context'\n\nexport const generateGetScaleProps = <P>(\n  props: P & ScaleProps,\n): GetScalePropsFunction => {\n  const getScaleProps: GetScalePropsFunction = keyOrKeys => {\n    if (!Array.isArray(keyOrKeys)) return props[keyOrKeys as keyof ScaleProps]\n    let value = undefined\n    for (const key of keyOrKeys) {\n      const currentValue = props[key]\n      if (typeof currentValue !== 'undefined') {\n        value = currentValue\n      }\n    }\n    return value\n  }\n  return getScaleProps\n}\n\nexport const generateGetAllScaleProps = <P>(\n  props: P & ScaleProps,\n): GetAllScalePropsFunction => {\n  const getAllScaleProps: GetAllScalePropsFunction = () => {\n    let scaleProps: ScaleProps = {}\n    for (const key of ScalePropKeys) {\n      const value = props[key as keyof ScaleProps]\n      if (typeof value !== 'undefined') {\n        scaleProps[key as keyof ScaleProps] = value as any\n      }\n    }\n    return scaleProps\n  }\n  return getAllScaleProps\n}\n"
  },
  {
    "path": "components/use-scale/with-scale.tsx",
    "content": "import React, { forwardRef } from 'react'\nimport { DynamicLayoutPipe, ScaleConfig, ScaleContext, ScaleProps } from './scale-context'\nimport useTheme from '../use-theme'\nimport { isCSSNumberValue } from '../utils/collections'\nimport { generateGetAllScaleProps, generateGetScaleProps } from './utils'\n\nconst reduceScaleCoefficient = (scale: number) => {\n  if (scale === 1) return scale\n  const diff = Math.abs((scale - 1) / 2)\n  return scale > 1 ? 1 + diff : 1 - diff\n}\n\nconst withScale = <T, P = {}>(\n  Render: React.ComponentType<P & { ref?: React.Ref<T> }>,\n) => {\n  const ScaleFC = forwardRef<T, P & ScaleProps>(({ children, ...props }, ref) => {\n    const { layout } = useTheme()\n    const {\n      paddingLeft,\n      pl,\n      paddingRight,\n      pr,\n      paddingTop,\n      pt,\n      paddingBottom,\n      pb,\n      marginTop,\n      mt,\n      marginRight,\n      mr,\n      marginBottom,\n      mb,\n      marginLeft,\n      ml,\n      px,\n      py,\n      mx,\n      my,\n      width,\n      height,\n      font,\n      w,\n      h,\n      margin,\n      padding,\n      unit = layout.unit,\n      scale = 1,\n      ...innerProps\n    } = props\n    const makeScaleHandler =\n      (attrValue: string | number | undefined): DynamicLayoutPipe =>\n      (scale1x, defaultValue) => {\n        // 0 means disable scale and the default value is 0\n        if (scale1x === 0) {\n          scale1x = 1\n          defaultValue = defaultValue || 0\n        }\n        const factor = reduceScaleCoefficient(scale) * scale1x\n        if (typeof attrValue === 'undefined') {\n          if (typeof defaultValue !== 'undefined') return `${defaultValue}`\n          return `calc(${factor} * ${unit})`\n        }\n\n        if (!isCSSNumberValue(attrValue)) return `${attrValue}`\n        const customFactor = factor * Number(attrValue)\n        return `calc(${customFactor} * ${unit})`\n      }\n\n    const value: ScaleConfig = {\n      unit: unit,\n      SCALES: {\n        pt: makeScaleHandler(paddingTop ?? pt ?? py ?? padding),\n        pr: makeScaleHandler(paddingRight ?? pr ?? px ?? padding),\n        pb: makeScaleHandler(paddingBottom ?? pb ?? py ?? padding),\n        pl: makeScaleHandler(paddingLeft ?? pl ?? px ?? padding),\n        px: makeScaleHandler(px ?? paddingLeft ?? paddingRight ?? pl ?? pr ?? padding),\n        py: makeScaleHandler(py ?? paddingTop ?? paddingBottom ?? pt ?? pb ?? padding),\n        mt: makeScaleHandler(marginTop ?? mt ?? my ?? margin),\n        mr: makeScaleHandler(marginRight ?? mr ?? mx ?? margin),\n        mb: makeScaleHandler(marginBottom ?? mb ?? my ?? margin),\n        ml: makeScaleHandler(marginLeft ?? ml ?? mx ?? margin),\n        mx: makeScaleHandler(mx ?? marginLeft ?? marginRight ?? ml ?? mr ?? margin),\n        my: makeScaleHandler(my ?? marginTop ?? marginBottom ?? mt ?? mb ?? margin),\n        width: makeScaleHandler(width ?? w),\n        height: makeScaleHandler(height ?? h),\n        font: makeScaleHandler(font),\n      },\n      getScaleProps: generateGetScaleProps(props),\n      getAllScaleProps: generateGetAllScaleProps(props),\n    }\n\n    return (\n      <ScaleContext.Provider value={value}>\n        <Render {...(innerProps as P)} ref={ref}>\n          {children}\n        </Render>\n      </ScaleContext.Provider>\n    )\n  })\n  ScaleFC.displayName = `Scale${Render.displayName || 'Wrapper'}`\n  return ScaleFC\n}\n\nexport default withScale\n"
  },
  {
    "path": "components/use-tabs/__tests__/use-tabs.test.tsx",
    "content": "import React, { useEffect } from 'react'\nimport { mount } from 'enzyme'\nimport { Tabs, useTabs } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\n\ndescribe('UseTabs', () => {\n  it('should follow changes with use-tabs', async () => {\n    const MockTabs: React.FC<{ value?: string }> = ({ value }) => {\n      const { setState, bindings } = useTabs('1')\n      useEffect(() => {\n        if (value) setState(value)\n      }, [value])\n      return (\n        <Tabs {...bindings}>\n          <Tabs.Item label=\"label1\" value=\"1\">\n            1\n          </Tabs.Item>\n          <Tabs.Item label=\"label2\" value=\"2\">\n            2\n          </Tabs.Item>\n        </Tabs>\n      )\n    }\n    const wrapper = mount(<MockTabs />)\n    let active = wrapper.find('header').find('.active')\n    expect(active.text()).toContain('label1')\n\n    wrapper.setProps({ value: '2' })\n    await updateWrapper(wrapper, 350)\n    active = wrapper.find('header').find('.active')\n    expect(active.text()).toContain('label2')\n\n    wrapper.find('header').find('.tab').at(0).simulate('click', nativeEvent)\n    active = wrapper.find('header').find('.active')\n    expect(active.text()).toContain('label1')\n  })\n})\n"
  },
  {
    "path": "components/use-tabs/index.ts",
    "content": "import useTabs from './use-tabs'\n\nexport default useTabs\n"
  },
  {
    "path": "components/use-tabs/use-tabs.ts",
    "content": "import { Dispatch, MutableRefObject, SetStateAction } from 'react'\nimport useCurrentState from '../utils/use-current-state'\n\nconst useTabs = (\n  initialValue: string,\n): {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  bindings: {\n    value: string\n    onChange: (val: string) => void\n  }\n} => {\n  const [state, setState, currentRef] = useCurrentState<string>(initialValue)\n\n  return {\n    state,\n    setState,\n    currentRef,\n    bindings: {\n      value: state,\n      onChange: (val: string) => {\n        setState(val)\n      },\n    },\n  }\n}\n\nexport default useTabs\n"
  },
  {
    "path": "components/use-theme/index.ts",
    "content": "import { useTheme } from './theme-context'\n\nexport default useTheme\n"
  },
  {
    "path": "components/use-theme/theme-context.ts",
    "content": "import React from 'react'\nimport Themes from '../themes'\nimport { GeistUIThemes } from '../themes/presets'\n\nconst defaultTheme = Themes.getPresetStaticTheme()\n\nexport const ThemeContext: React.Context<GeistUIThemes> =\n  React.createContext<GeistUIThemes>(defaultTheme)\nexport const useTheme = (): GeistUIThemes => React.useContext<GeistUIThemes>(ThemeContext)\n"
  },
  {
    "path": "components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`UseToast should render different actions 1`] = `\n\"<div class=\\\\\"toasts\\\\\"><div class=\\\\\"toast  toast-enter\\\\\"><div class=\\\\\"message\\\\\">hello</div><div class=\\\\\"action\\\\\"><button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><div class=\\\\\"text\\\\\">remove</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(1.6666666666666665 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: 13px;\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #fff;\n            background-color: #000;\n            border: 1px solid #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.48466666666666663 * 16px);\n            --geist-ui-button-height: calc(1.6666666666666665 * 16px);\n            --geist-ui-button-color: #fff;\n            --geist-ui-button-bg: #000;\n            min-width: min-content;\n            width: auto;\n            height: calc(1.6666666666666665 * 16px);\n            padding: 0 calc(0.7666666666666666 * 16px) 0 calc(0.7666666666666666 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button><button type=\\\\\"button\\\\\" class=\\\\\"btn\\\\\"><div class=\\\\\"text\\\\\">remove</div><style>\n          .btn {\n            box-sizing: border-box;\n            display: inline-block;\n            line-height: calc(1.6666666666666665 * 16px);\n            border-radius: 6px;\n            font-weight: 400;\n            font-size: 13px;\n            user-select: none;\n            outline: none;\n            text-transform: capitalize;\n            justify-content: center;\n            text-align: center;\n            white-space: nowrap;\n            transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,\n              border 200ms ease 0ms, color 200ms ease 0ms;\n            position: relative;\n            overflow: hidden;\n            color: #666;\n            background-color: #fff;\n            border: 1px solid #eaeaea;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            --geist-ui-button-icon-padding: calc(0.48466666666666663 * 16px);\n            --geist-ui-button-height: calc(1.6666666666666665 * 16px);\n            --geist-ui-button-color: #666;\n            --geist-ui-button-bg: #fff;\n            min-width: min-content;\n            width: auto;\n            height: calc(1.6666666666666665 * 16px);\n            padding: 0 calc(0.7666666666666666 * 16px) 0 calc(0.7666666666666666 * 16px);\n            margin: 0 0 0 0;\n          }\n\n          .btn:hover,\n          .btn:focus {\n            color: #000;\n            --geist-ui-button-color: #000;\n            background-color: #fff;\n            border-color: #000;\n            cursor: pointer;\n            pointer-events: auto;\n            box-shadow: none;\n            transform: translate3d(0px, 0px, 0px);\n          }\n\n          .btn :global(.text) {\n            position: relative;\n            z-index: 1;\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            text-align: center;\n            line-height: inherit;\n            top: -1px;\n          }\n\n          .btn :global(.text p),\n          .btn :global(.text pre),\n          .btn :global(.text div) {\n            margin: 0;\n          }\n        </style></button></div><style>\n          .toast {\n            width: 420px;\n            max-width: 90vw;\n            max-height: 75px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            color: #000;\n            background-color: #fff;\n            color: #000;\n            border: 0;\n            border-radius: 6px;\n            opacity: 1;\n            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n            transition: all 350ms cubic-bezier(0.1, 0.2, 0.1, 1);\n            overflow: hidden;\n          }\n          .message {\n            align-items: center;\n            height: 100%;\n            font-size: 0.875em;\n            display: -webkit-box;\n            word-break: break-all;\n            padding-right: 8pt;\n            overflow: hidden;\n            max-height: 100%;\n            text-overflow: ellipsis;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 2;\n            line-height: 1.1rem;\n          }\n          .toast-enter {\n            opacity: 0;\n            height: 0;\n            padding: 0;\n            margin: 0;\n            transform: translate(60px, 60px);\n          }\n          .toast-enter-active {\n            opacity: 1;\n            height: auto;\n            margin: 8px 0;\n            padding: 12px 16px;\n            transform: translate(0, 0);\n          }\n          .toast-leave {\n            opacity: 1;\n            transform: translate(0, 0);\n            height: auto;\n            margin: 8px 0;\n            padding: 12px 16px;\n          }\n          .toast-leave-active {\n            opacity: 0;\n            transform: translate(50px, -15px) scale(0.85);\n          }\n        </style></div><style>\n        .toasts {\n          position: fixed;\n          width: auto;\n          max-width: 100%;\n          right: 16pt;\n          bottom: 16pt;\n          z-index: 2000;\n          transition: all 400ms ease;\n          box-sizing: border-box;\n          display: flex;\n          flex-direction: column;\n        }\n        .top {\n          bottom: unset;\n          flex-direction: column-reverse;\n          top: 16pt;\n        }\n        .left {\n          right: unset;\n          left: 16pt;\n        }\n      </style></div>\"\n`;\n\nexports[`UseToast should work with different types 1`] = `\n\"<div class=\\\\\"toasts\\\\\"><div class=\\\\\"toast  toast-enter toast-enter-active\\\\\"><div class=\\\\\"message\\\\\">hello</div><div class=\\\\\"action\\\\\"></div><style>\n          .toast {\n            width: 420px;\n            max-width: 90vw;\n            max-height: 75px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            color: #000;\n            background-color: #0070f3;\n            color: white;\n            border: 0;\n            border-radius: 6px;\n            opacity: 1;\n            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);\n            transition: all 350ms cubic-bezier(0.1, 0.2, 0.1, 1);\n            overflow: hidden;\n          }\n          .message {\n            align-items: center;\n            height: 100%;\n            font-size: 0.875em;\n            display: -webkit-box;\n            word-break: break-all;\n            padding-right: 8pt;\n            overflow: hidden;\n            max-height: 100%;\n            text-overflow: ellipsis;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 2;\n            line-height: 1.1rem;\n          }\n          .toast-enter {\n            opacity: 0;\n            height: 0;\n            padding: 0;\n            margin: 0;\n            transform: translate(60px, 60px);\n          }\n          .toast-enter-active {\n            opacity: 1;\n            height: auto;\n            margin: 8px 0;\n            padding: 12px 16px;\n            transform: translate(0, 0);\n          }\n          .toast-leave {\n            opacity: 1;\n            transform: translate(0, 0);\n            height: auto;\n            margin: 8px 0;\n            padding: 12px 16px;\n          }\n          .toast-leave-active {\n            opacity: 0;\n            transform: translate(50px, -15px) scale(0.85);\n          }\n        </style></div><style>\n        .toasts {\n          position: fixed;\n          width: auto;\n          max-width: 100%;\n          right: 16pt;\n          bottom: 16pt;\n          z-index: 2000;\n          transition: all 400ms ease;\n          box-sizing: border-box;\n          display: flex;\n          flex-direction: column;\n        }\n        .top {\n          bottom: unset;\n          flex-direction: column-reverse;\n          top: 16pt;\n        }\n        .left {\n          right: unset;\n          left: 16pt;\n        }\n      </style></div>\"\n`;\n"
  },
  {
    "path": "components/use-toasts/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, ReactWrapper } from 'enzyme'\nimport { useToasts, GeistProvider } from 'components'\nimport { nativeEvent, updateWrapper } from 'tests/utils'\nimport { ToastInput } from '../use-toast'\n\nconst MockToast: React.FC<unknown> = () => {\n  const { setToast } = useToasts()\n  const clickHandler = (e: any = {}) => {\n    const keys = ['text', 'delay', 'type', 'actions']\n    const params = keys.reduce((pre, key) => {\n      const value = e.target[key]\n      if (!value) return pre\n      return { ...pre, [key]: value }\n    }, {})\n    setToast(params as ToastInput)\n  }\n  return (\n    <div id=\"btn\" onClick={clickHandler}>\n      btn\n    </div>\n  )\n}\n\nconst triggerToast = (wrapper: ReactWrapper, params = {}) => {\n  wrapper.find('#btn').simulate('click', {\n    ...nativeEvent,\n    target: params,\n  })\n}\n\nconst expectToastIsShow = (wrapper: ReactWrapper) => {\n  const toast = wrapper.find('.toasts').find('.toast')\n  expect(toast.length).not.toBe(0)\n}\n\nconst expectToastIsHidden = (wrapper: ReactWrapper) => {\n  const toast = wrapper.find('.toasts').find('.toast')\n  expect(toast.length).toBe(0)\n}\n\ndescribe('UseToast', () => {\n  it('should render correctly', async () => {\n    const wrapper = mount(\n      <GeistProvider>\n        <MockToast />\n      </GeistProvider>,\n    )\n\n    expectToastIsHidden(wrapper)\n    triggerToast(wrapper, { text: 'test-value' })\n    await updateWrapper(wrapper)\n    expectToastIsShow(wrapper)\n  })\n\n  it('should work with different types', async () => {\n    const wrapper = mount(\n      <GeistProvider>\n        <MockToast />\n      </GeistProvider>,\n    )\n\n    expectToastIsHidden(wrapper)\n    triggerToast(wrapper, { type: 'success', text: 'hello' })\n    await updateWrapper(wrapper, 100)\n    expectToastIsShow(wrapper)\n    expect(wrapper.find('.toasts').html()).toMatchSnapshot()\n  })\n\n  it('should close toast', async () => {\n    const wrapper = mount(\n      <GeistProvider>\n        <MockToast />\n      </GeistProvider>,\n    )\n\n    expectToastIsHidden(wrapper)\n    triggerToast(wrapper, { delay: 100, text: 'hello' })\n    await updateWrapper(wrapper, 0)\n    expectToastIsShow(wrapper)\n    // Element already hidden, but Dom was removed after delay\n    await updateWrapper(wrapper, 350)\n    const toast = wrapper.find('.toasts').find('.toast')\n    expect(toast.length).not.toBe(0)\n  })\n\n  it('the removeal should be delayed when hover is triggerd', async () => {\n    const wrapper = mount(\n      <GeistProvider>\n        <MockToast />\n      </GeistProvider>,\n    )\n\n    expectToastIsHidden(wrapper)\n    triggerToast(wrapper, { delay: 100, text: 'hello' })\n    await updateWrapper(wrapper, 0)\n    expectToastIsShow(wrapper)\n\n    wrapper.find('.toasts').simulate('mouseEnter', nativeEvent)\n    await updateWrapper(wrapper, 350)\n\n    // Hover event will postpone hidden event\n    let toast = wrapper.find('.toasts').find('.toast')\n    expect(toast.length).not.toBe(0)\n\n    // Restart hidden event after mouse leave\n    wrapper.find('.toasts').simulate('mouseLeave', nativeEvent)\n    await updateWrapper(wrapper, 350 + 200)\n    toast = wrapper.find('.toasts').find('.toast')\n    expect(toast.length).toBe(0)\n  })\n\n  it('should render different actions', async () => {\n    const wrapper = mount(\n      <GeistProvider>\n        <MockToast />\n      </GeistProvider>,\n    )\n    const actions = [\n      {\n        name: 'remove',\n        handler: () => {},\n      },\n      {\n        name: 'remove',\n        handler: () => {},\n        passive: true,\n      },\n    ]\n\n    triggerToast(wrapper, { actions, text: 'hello' })\n    await updateWrapper(wrapper)\n    expectToastIsShow(wrapper)\n    expect(wrapper.find('.toasts').html()).toMatchSnapshot()\n  })\n\n  it('should close toast when action triggered', async () => {\n    const wrapper = mount(\n      <GeistProvider>\n        <MockToast />\n      </GeistProvider>,\n    )\n    const actions = [\n      {\n        name: 'remove',\n        handler: (_event: any, cancel: () => void) => cancel(),\n      },\n    ]\n\n    expectToastIsHidden(wrapper)\n    triggerToast(wrapper, { actions, text: 'hello' })\n    await updateWrapper(wrapper)\n    expectToastIsShow(wrapper)\n    wrapper.find('.action').find('.btn').at(0).simulate('click', nativeEvent)\n\n    // Element already hidden, but Dom was removed after delay\n    await updateWrapper(wrapper, 250)\n    const toast = wrapper.find('.toasts').find('.toast')\n    expect(toast.length).not.toBe(0)\n  })\n\n  it('should work with multiple toasts', async () => {\n    const wrapper = mount(\n      <GeistProvider>\n        <MockToast />\n      </GeistProvider>,\n    )\n\n    expectToastIsHidden(wrapper)\n    triggerToast(wrapper, { delay: 100, text: 'hello' })\n    triggerToast(wrapper, { delay: 100, text: 'hello' })\n    triggerToast(wrapper, { delay: 100, text: 'hello' })\n    triggerToast(wrapper, { delay: 100, text: 'hello' })\n    triggerToast(wrapper, { delay: 100, text: 'hello' })\n    triggerToast(wrapper, { delay: 200, text: 'hello' })\n\n    /**\n     * If there are multiple Toasts at different deplay in the stack,\n     * the destory Dom event will wait for the maximum delay time.\n     */\n    await updateWrapper(wrapper, 350)\n    expectToastIsShow(wrapper)\n\n    await updateWrapper(wrapper, 200)\n    const toast = wrapper.find('.toasts').find('.toast')\n    expect(toast.length).not.toBe(0)\n  })\n})\n"
  },
  {
    "path": "components/use-toasts/helpers.tsx",
    "content": "import { Toast, ToastAction } from './use-toast'\nimport React from 'react'\nimport Button from '../button'\nimport { GeistUIThemesPalette } from '../themes'\nimport { NormalTypes, tuple } from '../utils/prop-types'\n\nexport const makeToastActions = (actions: Toast['actions'], cancelHandle: () => void) => {\n  const handler = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    userHandler: ToastAction['handler'],\n  ) => {\n    userHandler && userHandler(event, cancelHandle)\n  }\n  if (!actions || !actions.length) return null\n  return actions.map((action, index) => (\n    <Button\n      auto\n      scale={1 / 3}\n      font=\"13px\"\n      type={action.passive ? 'default' : 'secondary'}\n      key={`action-${index}`}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n        handler(event, action.handler)\n      }>\n      {action.name}\n    </Button>\n  ))\n}\n\nexport const getColors = (palette: GeistUIThemesPalette, type?: NormalTypes) => {\n  const colors: { [key in NormalTypes]: string } = {\n    default: palette.background,\n    secondary: palette.secondary,\n    success: palette.success,\n    warning: palette.warning,\n    error: palette.error,\n  }\n  const isDefault = !type || type === 'default'\n  if (isDefault)\n    return {\n      bgColor: colors.default,\n      color: palette.foreground,\n    }\n  /**\n   * Prevent main color change in special types.\n   * The color will only follow the theme when it is in the default type.\n   */\n  return {\n    bgColor: colors[type as NormalTypes],\n    color: 'white',\n  }\n}\n\nconst toastPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight')\nexport type ToastPlacement = typeof toastPlacement[number]\n\nexport const isTopPlacement = (placement: ToastPlacement) =>\n  `${placement}`.toLowerCase().startsWith('top')\nexport const isLeftPlacement = (placement: ToastPlacement) =>\n  `${placement}`.toLowerCase().endsWith('left')\n\nexport const getTranslateByPlacement = (\n  placement: ToastPlacement,\n): {\n  enter: string\n  leave: string\n} => {\n  const translateInByPlacement: Record<ToastPlacement, string> = {\n    topLeft: 'translate(-60px, -60px)',\n    topRight: 'translate(60px, -60px)',\n    bottomLeft: 'translate(-60px, 60px)',\n    bottomRight: 'translate(60px, 60px)',\n  }\n  const translateOutByPlacement: Record<ToastPlacement, string> = {\n    topLeft: 'translate(-50px, 15px) scale(0.85)',\n    topRight: 'translate(50px, 15px) scale(0.85)',\n    bottomLeft: 'translate(-50px, -15px) scale(0.85)',\n    bottomRight: 'translate(50px, -15px) scale(0.85)',\n  }\n  return {\n    enter: translateInByPlacement[placement],\n    leave: translateOutByPlacement[placement],\n  }\n}\n"
  },
  {
    "path": "components/use-toasts/index.ts",
    "content": "import useToasts from './use-toast'\n\nexport type { ToastAction, Toast, ToastTypes, ToastInput, ToastLayout } from './use-toast'\nexport default useToasts\n"
  },
  {
    "path": "components/use-toasts/toast-container.tsx",
    "content": "import React, { useEffect, useMemo } from 'react'\nimport { createPortal } from 'react-dom'\nimport usePortal from '../utils/use-portal'\nimport useTheme from '../use-theme'\nimport { useGeistUIContext } from '../utils/use-geist-ui-context'\nimport ToastItem from './toast-item'\nimport useClasses from '../use-classes'\nimport { isLeftPlacement, isTopPlacement } from './helpers'\nimport useCurrentState from '../utils/use-current-state'\n\nconst ToastContainer: React.FC<React.PropsWithChildren<unknown>> = () => {\n  const theme = useTheme()\n  const portal = usePortal('toast')\n  const [, setHovering, hoveringRef] = useCurrentState<boolean>(false)\n  const { toasts, updateToasts, toastLayout, lastUpdateToastId } = useGeistUIContext()\n  const memoizedLayout = useMemo(() => toastLayout, [toastLayout])\n  const toastElements = useMemo(\n    () =>\n      toasts.map(toast => (\n        <ToastItem toast={toast} layout={memoizedLayout} key={toast._internalIdent} />\n      )),\n    [toasts, memoizedLayout],\n  )\n  const classNames = useMemo(\n    () =>\n      useClasses('toasts', {\n        top: isTopPlacement(toastLayout.placement),\n        left: isLeftPlacement(toastLayout.placement),\n      }),\n    [memoizedLayout],\n  )\n  const hoverHandler = (isHovering: boolean) => {\n    setHovering(isHovering)\n    if (isHovering) {\n      return updateToasts(last =>\n        last.map(toast => {\n          if (!toast.visible) return toast\n          toast._timeout && window.clearTimeout(toast._timeout)\n          return {\n            ...toast,\n            timeout: null,\n          }\n        }),\n      )\n    }\n\n    updateToasts(last =>\n      last.map((toast, index) => {\n        if (!toast.visible) return toast\n        toast._timeout && window.clearTimeout(toast._timeout)\n        return {\n          ...toast,\n          _timeout: (() => {\n            const timer = window.setTimeout(() => {\n              toast.cancel()\n              window.clearTimeout(timer)\n            }, toast.delay + index * 100)\n            return timer\n          })(),\n        }\n      }),\n    )\n  }\n\n  useEffect(() => {\n    const index = toasts.findIndex(r => r._internalIdent === lastUpdateToastId)\n    const toast = toasts[index]\n    if (!toast || toast.visible || !hoveringRef.current) return\n    const hasVisible = toasts.find((r, i) => i < index && r.visible)\n    if (hasVisible || !hoveringRef.current) return\n    hoverHandler(false)\n  }, [toasts, lastUpdateToastId])\n\n  useEffect(() => {\n    let timeout: null | number = null\n    const timer = window.setInterval(() => {\n      if (toasts.length === 0) return\n      timeout = window.setTimeout(() => {\n        const allInvisible = !toasts.find(r => r.visible)\n        allInvisible && updateToasts(() => [])\n        timeout && clearTimeout(timeout)\n      }, 350)\n    }, 5000)\n\n    return () => {\n      timer && clearInterval(timer)\n      timeout && clearTimeout(timeout)\n    }\n  }, [toasts])\n\n  if (!portal) return null\n  if (!toasts || toasts.length === 0) return null\n  return createPortal(\n    <div\n      className={classNames}\n      onMouseEnter={() => hoverHandler(true)}\n      onMouseLeave={() => hoverHandler(false)}>\n      {toastElements}\n      <style jsx>{`\n        .toasts {\n          position: fixed;\n          width: auto;\n          max-width: 100%;\n          right: ${theme.layout.gap};\n          bottom: ${theme.layout.gap};\n          z-index: 2000;\n          transition: all 400ms ease;\n          box-sizing: border-box;\n          display: flex;\n          flex-direction: column;\n        }\n        .top {\n          bottom: unset;\n          flex-direction: column-reverse;\n          top: ${theme.layout.gap};\n        }\n        .left {\n          right: unset;\n          left: ${theme.layout.gap};\n        }\n      `}</style>\n    </div>,\n    portal,\n  )\n}\n\nexport default ToastContainer\n"
  },
  {
    "path": "components/use-toasts/toast-item.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from '../use-theme'\nimport type { Toast, ToastLayout } from './use-toast'\nimport CssTransition from '../shared/css-transition'\nimport { makeToastActions, getColors, getTranslateByPlacement } from './helpers'\n\nexport interface ToastItemProps {\n  toast: Toast\n  layout: Required<ToastLayout>\n}\n\nconst ToastItem: React.FC<ToastItemProps> = React.memo(({ toast, layout }) => {\n  const theme = useTheme()\n  const { color, bgColor } = useMemo(\n    () => getColors(theme.palette, toast.type),\n    [theme.palette, toast.type],\n  )\n  const isReactNode = typeof toast.text !== 'string'\n  const { padding, margin, maxHeight, maxWidth, width, placement } = layout\n  const { enter, leave } = useMemo(() => getTranslateByPlacement(placement), [placement])\n\n  return (\n    <CssTransition name=\"toast\" visible={toast.visible} clearTime={350}>\n      <div key={toast.id} className=\"toast\">\n        {isReactNode ? (\n          toast.text\n        ) : (\n          <>\n            <div className=\"message\">{toast.text}</div>\n            <div className=\"action\">{makeToastActions(toast.actions, toast.cancel)}</div>\n          </>\n        )}\n\n        <style jsx>{`\n          .toast {\n            width: ${width};\n            max-width: ${maxWidth};\n            max-height: ${maxHeight};\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            color: ${theme.palette.foreground};\n            background-color: ${bgColor};\n            color: ${color};\n            border: 0;\n            border-radius: ${theme.layout.radius};\n            opacity: 1;\n            box-shadow: ${theme.expressiveness.shadowSmall};\n            transition: all 350ms cubic-bezier(0.1, 0.2, 0.1, 1);\n            overflow: hidden;\n          }\n          .message {\n            align-items: center;\n            height: 100%;\n            font-size: 0.875em;\n            display: -webkit-box;\n            word-break: break-all;\n            padding-right: ${theme.layout.gapHalf};\n            overflow: hidden;\n            max-height: 100%;\n            text-overflow: ellipsis;\n            -webkit-box-orient: vertical;\n            -webkit-line-clamp: 2;\n            line-height: 1.1rem;\n          }\n          .toast-enter {\n            opacity: 0;\n            height: 0;\n            padding: 0;\n            margin: 0;\n            transform: ${enter};\n          }\n          .toast-enter-active {\n            opacity: 1;\n            height: auto;\n            margin: ${margin};\n            padding: ${padding};\n            transform: translate(0, 0);\n          }\n          .toast-leave {\n            opacity: 1;\n            transform: translate(0, 0);\n            height: auto;\n            margin: ${margin};\n            padding: ${padding};\n          }\n          .toast-leave-active {\n            opacity: 0;\n            transform: ${leave};\n          }\n        `}</style>\n      </div>\n    </CssTransition>\n  )\n})\n\nexport default ToastItem\n"
  },
  {
    "path": "components/use-toasts/use-toast.tsx",
    "content": "import React, { CSSProperties, useEffect } from 'react'\nimport type { NormalTypes } from '../utils/prop-types'\nimport { defaultToastLayout, useGeistUIContext } from '../utils/use-geist-ui-context'\nimport { getId } from '../utils/collections'\nimport { ToastPlacement } from '../use-toasts/helpers'\n\nexport interface ToastAction {\n  name: string\n  handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void\n  passive?: boolean\n}\nexport type ToastTypes = NormalTypes\nexport type ToastLayout = {\n  padding?: CSSProperties['padding']\n  margin?: CSSProperties['margin']\n  width?: CSSProperties['width']\n  maxWidth?: CSSProperties['maxWidth']\n  maxHeight?: CSSProperties['maxHeight']\n  placement?: ToastPlacement\n}\nexport interface ToastInput {\n  text: string | React.ReactNode\n  type?: ToastTypes\n  id?: string\n  delay?: number\n  actions?: Array<ToastAction>\n}\nexport type ToastInstance = {\n  visible: boolean\n  cancel: () => void\n  _timeout: null | number\n  _internalIdent: string\n}\n\nexport type Toast = Required<ToastInput> & ToastInstance\n\nconst defaultToast = {\n  delay: 2000,\n  type: 'default' as ToastTypes,\n}\n\nexport type ToastHooksResult = {\n  toasts: Array<Toast>\n  setToast: (toast: ToastInput) => void\n  removeAll: () => void\n  findToastOneByID: (ident: string) => Toast | undefined\n  removeToastOneByID: (ident: string) => void\n}\n\nconst useToasts = (layout?: ToastLayout): ToastHooksResult => {\n  const { updateToasts, toasts, updateToastLayout, updateLastToastId } =\n    useGeistUIContext()\n\n  useEffect(() => {\n    if (!layout) return\n    updateToastLayout(() =>\n      layout\n        ? {\n            ...defaultToastLayout,\n            ...layout,\n          }\n        : defaultToastLayout,\n    )\n  }, [])\n\n  const cancel = (internalId: string) => {\n    updateToasts((currentToasts: Array<Toast>) =>\n      currentToasts.map(item => {\n        if (item._internalIdent !== internalId) return item\n        return { ...item, visible: false }\n      }),\n    )\n    updateLastToastId(() => internalId)\n  }\n  const removeAll = () => {\n    updateToasts(last => last.map(toast => ({ ...toast, visible: false })))\n  }\n  const findToastOneByID = (id: string) => toasts.find(t => t.id === id)\n  const removeToastOneByID = (id: string) => {\n    updateToasts(last =>\n      last.map(toast => {\n        if (toast.id !== id) return toast\n        return {\n          ...toast,\n          visible: false,\n        }\n      }),\n    )\n  }\n\n  const setToast = (toast: ToastInput): void => {\n    const internalIdent = `toast-${getId()}`\n    const delay = toast.delay || defaultToast.delay\n    if (toast.id) {\n      const hasIdent = toasts.find(t => t.id === toast.id)\n      if (hasIdent) {\n        throw new Error('Toast: Already have the same key: \"ident\"')\n      }\n    }\n\n    updateToasts((last: Array<Toast>) => {\n      const newToast: Toast = {\n        delay,\n        text: toast.text,\n        visible: true,\n        type: toast.type || defaultToast.type,\n        id: toast.id || internalIdent,\n        actions: toast.actions || [],\n        _internalIdent: internalIdent,\n        _timeout: window.setTimeout(() => {\n          cancel(internalIdent)\n          if (newToast._timeout) {\n            window.clearTimeout(newToast._timeout)\n            newToast._timeout = null\n          }\n        }, delay),\n        cancel: () => cancel(internalIdent),\n      }\n      return [...last, newToast]\n    })\n  }\n\n  return {\n    toasts,\n    setToast,\n    removeAll,\n    findToastOneByID,\n    removeToastOneByID,\n  }\n}\n\nexport default useToasts\n"
  },
  {
    "path": "components/user/__tests__/__snapshots__/index.test.tsx.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[` User should support image and text 1`] = `\nLoadedCheerio {\n  \"0\": Node {\n    \"attribs\": Object {},\n    \"children\": Array [\n      Node {\n        \"attribs\": Object {\n          \"class\": \"user\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"avatar\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar-text\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"witt\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar-text\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"names\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"names\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"name\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"witt\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"social\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"avatar\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar-text\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-text\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"names\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-text\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"avatar-text\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"witt\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": Node {\n          \"attribs\": Object {\n            \"class\": \"user\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"avatar\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar-img\",\n                    \"draggable\": \"false\",\n                    \"src\": \"https://unix.bio/assets/avatar.png\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"img\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"draggable\": undefined,\n                    \"src\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"draggable\": undefined,\n                    \"src\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-img\",\n                      \"draggable\": \"false\",\n                      \"src\": \"https://unix.bio/assets/avatar.png\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"img\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"names\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"social\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"name\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"witt\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"names\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-img\",\n                      \"draggable\": \"false\",\n                      \"src\": \"https://unix.bio/assets/avatar.png\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"img\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"avatar-img\",\n                        \"draggable\": \"false\",\n                        \"src\": \"https://unix.bio/assets/avatar.png\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"img\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"draggable\": undefined,\n                        \"src\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"draggable\": undefined,\n                        \"src\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"names\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"social\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"name\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"witt\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"avatar-img\",\n                        \"draggable\": \"false\",\n                        \"src\": \"https://unix.bio/assets/avatar.png\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"img\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"draggable\": undefined,\n                        \"src\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"draggable\": undefined,\n                        \"src\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"avatar-img\",\n                          \"draggable\": \"false\",\n                          \"src\": \"https://unix.bio/assets/avatar.png\",\n                        },\n                        \"children\": Array [],\n                        \"name\": \"img\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                          \"draggable\": undefined,\n                          \"src\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                          \"draggable\": undefined,\n                          \"src\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": [Circular],\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"parent\": [Circular],\n        \"prev\": null,\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n      Node {\n        \"attribs\": Object {\n          \"class\": \"user\",\n        },\n        \"children\": Array [\n          Node {\n            \"attribs\": Object {\n              \"class\": \"avatar\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar-img\",\n                  \"draggable\": \"false\",\n                  \"src\": \"https://unix.bio/assets/avatar.png\",\n                },\n                \"children\": Array [],\n                \"name\": \"img\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                  \"draggable\": undefined,\n                  \"src\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                  \"draggable\": undefined,\n                  \"src\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar-img\",\n                    \"draggable\": \"false\",\n                    \"src\": \"https://unix.bio/assets/avatar.png\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"img\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"draggable\": undefined,\n                    \"src\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"draggable\": undefined,\n                    \"src\": undefined,\n                  },\n                },\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n            ],\n            \"name\": \"span\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {\n                \"class\": \"names\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"parent\": [Circular],\n            \"prev\": null,\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {\n              \"class\": \"names\",\n            },\n            \"children\": Array [\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"name\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"data\": \"witt\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              Node {\n                \"attribs\": Object {\n                  \"class\": \"social\",\n                },\n                \"children\": Array [],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n            ],\n            \"name\": \"div\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": [Circular],\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"avatar\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar-img\",\n                    \"draggable\": \"false\",\n                    \"src\": \"https://unix.bio/assets/avatar.png\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"img\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                    \"draggable\": undefined,\n                    \"src\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                    \"draggable\": undefined,\n                    \"src\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-img\",\n                      \"draggable\": \"false\",\n                      \"src\": \"https://unix.bio/assets/avatar.png\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"img\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"tag\",\n            \"x-attribsNamespace\": Object {\n              \"class\": undefined,\n            },\n            \"x-attribsPrefix\": Object {\n              \"class\": undefined,\n            },\n          },\n          Node {\n            \"attribs\": Object {},\n            \"children\": Array [\n              Node {\n                \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"text\",\n              },\n            ],\n            \"name\": \"style\",\n            \"namespace\": \"http://www.w3.org/1999/xhtml\",\n            \"next\": null,\n            \"parent\": [Circular],\n            \"prev\": Node {\n              \"attribs\": Object {\n                \"class\": \"names\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": [Circular],\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-img\",\n                      \"draggable\": \"false\",\n                      \"src\": \"https://unix.bio/assets/avatar.png\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"img\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                      \"draggable\": undefined,\n                      \"src\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"avatar-img\",\n                        \"draggable\": \"false\",\n                        \"src\": \"https://unix.bio/assets/avatar.png\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"img\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                        \"draggable\": undefined,\n                        \"src\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                        \"draggable\": undefined,\n                        \"src\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            \"type\": \"style\",\n            \"x-attribsNamespace\": Object {},\n            \"x-attribsPrefix\": Object {},\n          },\n        ],\n        \"name\": \"div\",\n        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n        \"next\": null,\n        \"parent\": [Circular],\n        \"prev\": Node {\n          \"attribs\": Object {\n            \"class\": \"user\",\n          },\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {\n                \"class\": \"avatar\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar-text\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-text\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n              ],\n              \"name\": \"span\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {\n                  \"class\": \"names\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"social\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"name\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"witt\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": Node {\n                  \"attribs\": Object {},\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"style\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": [Circular],\n                  \"type\": \"style\",\n                  \"x-attribsNamespace\": Object {},\n                  \"x-attribsPrefix\": Object {},\n                },\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {\n                \"class\": \"names\",\n              },\n              \"children\": Array [\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"name\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"data\": \"witt\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"text\",\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": [Circular],\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                Node {\n                  \"attribs\": Object {\n                    \"class\": \"social\",\n                  },\n                  \"children\": Array [],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": [Circular],\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n              ],\n              \"name\": \"div\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [\n                  Node {\n                    \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"text\",\n                  },\n                ],\n                \"name\": \"style\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"style\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"avatar\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"avatar-text\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {},\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"style\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"avatar-text\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"witt\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"style\",\n                    \"x-attribsNamespace\": Object {},\n                    \"x-attribsPrefix\": Object {},\n                  },\n                ],\n                \"name\": \"span\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {\n                \"class\": undefined,\n              },\n              \"x-attribsPrefix\": Object {\n                \"class\": undefined,\n              },\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [\n                Node {\n                  \"data\": \"\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: calc(1 * 16px);\n          font-size: var(--user-font-size);\n          width: max-content;\n          height: auto;\n          padding: 0 calc(0.5 * 16px) 0 calc(0.5 * 16px);\n          margin: 0 0 0 0;\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: 8pt;\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: #111;\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: #444;\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      \",\n                  \"next\": null,\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"text\",\n                },\n              ],\n              \"name\": \"style\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {\n                  \"class\": \"names\",\n                },\n                \"children\": Array [\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"name\",\n                    },\n                    \"children\": Array [\n                      Node {\n                        \"data\": \"witt\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"text\",\n                      },\n                    ],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"social\",\n                      },\n                      \"children\": Array [],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": [Circular],\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"parent\": [Circular],\n                    \"prev\": null,\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                  Node {\n                    \"attribs\": Object {\n                      \"class\": \"social\",\n                    },\n                    \"children\": Array [],\n                    \"name\": \"span\",\n                    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                    \"next\": null,\n                    \"parent\": [Circular],\n                    \"prev\": Node {\n                      \"attribs\": Object {\n                        \"class\": \"name\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"witt\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": [Circular],\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    \"type\": \"tag\",\n                    \"x-attribsNamespace\": Object {\n                      \"class\": undefined,\n                    },\n                    \"x-attribsPrefix\": Object {\n                      \"class\": undefined,\n                    },\n                  },\n                ],\n                \"name\": \"div\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": Node {\n                  \"attribs\": Object {\n                    \"class\": \"avatar\",\n                  },\n                  \"children\": Array [\n                    Node {\n                      \"attribs\": Object {\n                        \"class\": \"avatar-text\",\n                      },\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"witt\",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"span\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": Node {\n                        \"attribs\": Object {},\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"style\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": null,\n                        \"parent\": [Circular],\n                        \"prev\": [Circular],\n                        \"type\": \"style\",\n                        \"x-attribsNamespace\": Object {},\n                        \"x-attribsPrefix\": Object {},\n                      },\n                      \"parent\": [Circular],\n                      \"prev\": null,\n                      \"type\": \"tag\",\n                      \"x-attribsNamespace\": Object {\n                        \"class\": undefined,\n                      },\n                      \"x-attribsPrefix\": Object {\n                        \"class\": undefined,\n                      },\n                    },\n                    Node {\n                      \"attribs\": Object {},\n                      \"children\": Array [\n                        Node {\n                          \"data\": \"\n        .avatar {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n          border: 1px solid #eaeaea;\n          border-radius: 50%;\n          vertical-align: top;\n          background-color: #fff;\n          box-sizing: border-box;\n          width: calc(1.75 * 16px);\n          height: calc(1.75 * 16px);\n          padding: 0 0 0 0;\n          margin: 0 0 0 0;\n        }\n\n        .avatar-img {\n          display: inline-block;\n          object-fit: cover;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          user-select: none;\n        }\n\n        .avatar-text {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          font-size: calc(1 * 16px);\n          text-align: center;\n          transform: translate(-50%, -50%) scale(0.65);\n          white-space: nowrap;\n          user-select: none;\n        }\n      \",\n                          \"next\": null,\n                          \"parent\": [Circular],\n                          \"prev\": null,\n                          \"type\": \"text\",\n                        },\n                      ],\n                      \"name\": \"style\",\n                      \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                      \"next\": null,\n                      \"parent\": [Circular],\n                      \"prev\": Node {\n                        \"attribs\": Object {\n                          \"class\": \"avatar-text\",\n                        },\n                        \"children\": Array [\n                          Node {\n                            \"data\": \"witt\",\n                            \"next\": null,\n                            \"parent\": [Circular],\n                            \"prev\": null,\n                            \"type\": \"text\",\n                          },\n                        ],\n                        \"name\": \"span\",\n                        \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                        \"next\": [Circular],\n                        \"parent\": [Circular],\n                        \"prev\": null,\n                        \"type\": \"tag\",\n                        \"x-attribsNamespace\": Object {\n                          \"class\": undefined,\n                        },\n                        \"x-attribsPrefix\": Object {\n                          \"class\": undefined,\n                        },\n                      },\n                      \"type\": \"style\",\n                      \"x-attribsNamespace\": Object {},\n                      \"x-attribsPrefix\": Object {},\n                    },\n                  ],\n                  \"name\": \"span\",\n                  \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                  \"next\": [Circular],\n                  \"parent\": [Circular],\n                  \"prev\": null,\n                  \"type\": \"tag\",\n                  \"x-attribsNamespace\": Object {\n                    \"class\": undefined,\n                  },\n                  \"x-attribsPrefix\": Object {\n                    \"class\": undefined,\n                  },\n                },\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {\n                  \"class\": undefined,\n                },\n                \"x-attribsPrefix\": Object {\n                  \"class\": undefined,\n                },\n              },\n              \"type\": \"style\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"div\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": [Circular],\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {\n            \"class\": undefined,\n          },\n          \"x-attribsPrefix\": Object {\n            \"class\": undefined,\n          },\n        },\n        \"type\": \"tag\",\n        \"x-attribsNamespace\": Object {\n          \"class\": undefined,\n        },\n        \"x-attribsPrefix\": Object {\n          \"class\": undefined,\n        },\n      },\n    ],\n    \"name\": \"div\",\n    \"namespace\": \"http://www.w3.org/1999/xhtml\",\n    \"next\": null,\n    \"parent\": Node {\n      \"children\": Array [\n        [Circular],\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n    },\n    \"prev\": null,\n    \"type\": \"tag\",\n    \"x-attribsNamespace\": Object {},\n    \"x-attribsPrefix\": Object {},\n  },\n  \"_root\": LoadedCheerio {\n    \"0\": Node {\n      \"children\": Array [\n        Node {\n          \"attribs\": Object {},\n          \"children\": Array [\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"head\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"body\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": null,\n                \"parent\": [Circular],\n                \"prev\": [Circular],\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"parent\": [Circular],\n              \"prev\": null,\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n            Node {\n              \"attribs\": Object {},\n              \"children\": Array [],\n              \"name\": \"body\",\n              \"namespace\": \"http://www.w3.org/1999/xhtml\",\n              \"next\": null,\n              \"parent\": [Circular],\n              \"prev\": Node {\n                \"attribs\": Object {},\n                \"children\": Array [],\n                \"name\": \"head\",\n                \"namespace\": \"http://www.w3.org/1999/xhtml\",\n                \"next\": [Circular],\n                \"parent\": [Circular],\n                \"prev\": null,\n                \"type\": \"tag\",\n                \"x-attribsNamespace\": Object {},\n                \"x-attribsPrefix\": Object {},\n              },\n              \"type\": \"tag\",\n              \"x-attribsNamespace\": Object {},\n              \"x-attribsPrefix\": Object {},\n            },\n          ],\n          \"name\": \"html\",\n          \"namespace\": \"http://www.w3.org/1999/xhtml\",\n          \"next\": null,\n          \"parent\": [Circular],\n          \"prev\": null,\n          \"type\": \"tag\",\n          \"x-attribsNamespace\": Object {},\n          \"x-attribsPrefix\": Object {},\n        },\n      ],\n      \"name\": \"root\",\n      \"next\": null,\n      \"parent\": null,\n      \"prev\": null,\n      \"type\": \"root\",\n      \"x-mode\": \"quirks\",\n    },\n    \"_root\": [Circular],\n    \"length\": 1,\n    \"options\": Object {\n      \"decodeEntities\": true,\n      \"xml\": false,\n    },\n  },\n  \"length\": 1,\n  \"options\": Object {\n    \"decodeEntities\": true,\n    \"xml\": false,\n  },\n}\n`;\n"
  },
  {
    "path": "components/user/__tests__/index.test.tsx",
    "content": "import React from 'react'\nimport { mount, render } from 'enzyme'\nimport { User } from 'components'\n\ndescribe(' User', () => {\n  it('should render correctly', () => {\n    const wrapper = mount(<User name=\"witt\" />)\n    expect(() => wrapper.unmount()).not.toThrow()\n  })\n\n  it('should support image and text', () => {\n    const wrapper = render(\n      <div>\n        <User name=\"witt\" text=\"witt\" />\n        <User name=\"witt\" src=\"https://unix.bio/assets/avatar.png\" />\n      </div>,\n    )\n    expect(wrapper).toMatchSnapshot()\n  })\n\n  it('should render description correctly', () => {\n    const wrapper = mount(<User name=\"witt\">description</User>)\n    expect(wrapper.text().toLowerCase()).toContain('description')\n  })\n\n  it('should render link on user.link', () => {\n    const wrapper = mount(\n      <User name=\"witt\">\n        <User.Link href=\"https://twitter.com/echo_witt\">twitter</User.Link>\n      </User>,\n    )\n    const link = wrapper.find('a')\n    expect(link.length).not.toBe(0)\n  })\n\n  it('should pass alt attribute', () => {\n    const wrapper = mount(\n      <User name=\"witt\" src=\"https://unix.bio/assets/avatar.png\" altText=\"witt\" />,\n    )\n    expect(wrapper.find('img').prop('alt')).toEqual('witt')\n  })\n})\n"
  },
  {
    "path": "components/user/index.ts",
    "content": "import User from './user'\nimport UserLink from './user-link'\n\nexport type UserComponentType = typeof User & {\n  Link: typeof UserLink\n}\n;(User as UserComponentType).Link = UserLink\n\nexport type { UserProps } from './user'\nexport default User as UserComponentType\n"
  },
  {
    "path": "components/user/user-link.tsx",
    "content": "import React from 'react'\nimport Link from '../link'\n\ninterface Props {\n  href?: string\n  className?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>\nexport type UserLinkProps = Props & NativeAttrs\n\nconst UserLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.PropsWithChildren<UserLinkProps>\n>(\n  (\n    {\n      href,\n      className,\n      children,\n      ...props\n    }: React.PropsWithChildren<UserLinkProps> & typeof defaultProps,\n    ref: React.Ref<HTMLAnchorElement>,\n  ) => {\n    return (\n      <div className={className} {...props}>\n        <Link ref={ref} href={href} color target=\"_blank\" rel=\"noopener\">\n          {children}\n        </Link>\n        <style jsx>{`\n          div :global(a:hover) {\n            opacity: 0.7;\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nUserLink.defaultProps = defaultProps\nUserLink.displayName = 'GeistUserLink'\nexport default UserLink\n"
  },
  {
    "path": "components/user/user.tsx",
    "content": "import React, { ReactNode } from 'react'\nimport Avatar from '../avatar'\nimport useTheme from '../use-theme'\nimport useScale, { withScale } from '../use-scale'\nimport useClasses from '../use-classes'\n\ninterface Props {\n  name: ReactNode | string\n  src?: string\n  text?: string\n  className?: string\n  altText?: string\n}\n\nconst defaultProps = {\n  className: '',\n}\n\ntype NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>\nexport type UserProps = Props & NativeAttrs\n\nconst UserComponent: React.FC<React.PropsWithChildren<UserProps>> = ({\n  src,\n  text,\n  name,\n  children,\n  className,\n  altText,\n  ...props\n}: React.PropsWithChildren<UserProps> & typeof defaultProps) => {\n  const theme = useTheme()\n  const { SCALES, getScaleProps } = useScale()\n  const scale = getScaleProps('scale') as number | undefined\n  return (\n    <div className={useClasses('user', className)} {...props}>\n      <Avatar src={src} scale={scale} text={text} alt={altText} />\n      <div className=\"names\">\n        <span className=\"name\">{name}</span>\n        <span className=\"social\">{children}</span>\n      </div>\n\n      <style jsx>{`\n        .user {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          max-width: 100%;\n          --user-font-size: ${SCALES.font(1)};\n          font-size: var(--user-font-size);\n          width: ${SCALES.width(1, 'max-content')};\n          height: ${SCALES.height(1, 'auto')};\n          padding: ${SCALES.pt(0)} ${SCALES.pr(0.5)} ${SCALES.pb(0)} ${SCALES.pl(0.5)};\n          margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};\n        }\n\n        .names {\n          font-size: inherit;\n          margin-left: ${theme.layout.gapHalf};\n          display: inline-flex;\n          flex-direction: column;\n          white-space: nowrap;\n        }\n\n        .name {\n          font-size: calc(0.89 * var(--user-font-size));\n          color: ${theme.palette.accents_8};\n          line-height: 1.1em;\n          text-transform: capitalize;\n          font-weight: 500;\n          max-width: 15rem;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n\n        .social {\n          font-size: calc(0.75 * var(--user-font-size));\n          color: ${theme.palette.accents_6};\n        }\n\n        .social :global(*:first-child) {\n          margin-top: 0;\n        }\n\n        .social :global(*:last-child) {\n          margin-bottom: 0;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nUserComponent.defaultProps = defaultProps\nUserComponent.displayName = 'GeistUser'\nconst User = withScale(UserComponent)\nexport default User\n"
  },
  {
    "path": "components/utils/__tests__/calculations.test.tsx",
    "content": "import React from 'react'\nimport { mount } from 'enzyme'\nimport { getProportions, useProportions } from '../calculations'\n\ndescribe('calculations', () => {\n  it('should return ratio and limit the length of decimals', () => {\n    expect(getProportions(0, 100)).toEqual(0)\n    expect(getProportions(50, 100)).toEqual(50)\n    expect(getProportions(11.22, 100)).toEqual(11.22)\n    expect(getProportions(10, 11, 4)).toEqual(90.9091)\n    expect(getProportions(10, 11, 3)).toEqual(90.909)\n  })\n\n  it('should be return max or min when out of range', () => {\n    expect(getProportions(101, 100)).toEqual(100)\n    expect(getProportions(-1, 100)).toEqual(0)\n    expect(getProportions(-10, 10)).toEqual(0)\n    expect(getProportions(3, 2)).toEqual(100)\n  })\n\n  it('should be return min-value when value is not number', () => {\n    const mock = getProportions as any\n    expect(mock('test', 10)).toEqual(0)\n    expect(mock('-', 10)).toEqual(0)\n    expect(mock('', 10)).toEqual(0)\n  })\n\n  it('should be return original value when the length is reasonable', () => {\n    expect(getProportions(3, 10, 10)).toEqual(30)\n    expect(getProportions(3, 16, 10)).toEqual(18.75)\n  })\n\n  it('should work with hooks', () => {\n    type Params = { value: number; max: number; maxFixed?: number }\n    const MockComponent: React.FC<Params> = ({ value, max, maxFixed }) => {\n      const val = useProportions(value, max, maxFixed)\n      return <span>{val}</span>\n    }\n    const wrapper = mount(<MockComponent value={1} max={10} />)\n    expect(wrapper.find('span').text()).toEqual(`${getProportions(1, 10)}`)\n\n    wrapper.setProps({ value: 10, max: 5, maxFixed: 2 })\n    expect(wrapper.find('span').text()).toEqual(`${getProportions(10, 5, 2)}`)\n  })\n})\n"
  },
  {
    "path": "components/utils/calculations.ts",
    "content": "import { useMemo } from 'react'\n\n/**\n * Calculate the ratio of two numbers, maximum decimal length can be specified.\n *\n * (0, 100) => 0\n * (50, 100) => 50\n * (11.22, 100) => 11.22\n * (11.22, 100, 4) => 11.2200\n */\nexport const getProportions = (\n  value: number,\n  max: number,\n  maxFixed: number = 2,\n): number => {\n  const val = value / max\n  const couldBeDecimalValue = (Number.isNaN(val) ? 0 : val) * 100\n  if (couldBeDecimalValue > 100) return 100\n  if (couldBeDecimalValue < 0) return 0\n  if (!`${couldBeDecimalValue}`.includes('.')) return couldBeDecimalValue\n\n  const decimal = `${couldBeDecimalValue}`.split('.')[1]\n  if (decimal.length < maxFixed) return couldBeDecimalValue\n\n  return +couldBeDecimalValue.toFixed(maxFixed)\n}\n\nexport const useProportions = (value: number, max: number, maxFixed: number = 2) =>\n  useMemo(() => getProportions(value, max, maxFixed), [value, max, maxFixed])\n"
  },
  {
    "path": "components/utils/collections.ts",
    "content": "import React, { ReactNode } from 'react'\n\nexport const getId = () => {\n  return Math.random().toString(32).slice(2, 10)\n}\n\nexport const capitalize = (str: string | symbol | number | undefined | null) => {\n  const safeStr = String(str).trim()\n  return safeStr.charAt(0).toUpperCase() + safeStr.slice(1)\n}\n\nexport const hasChild = (\n  children: ReactNode | undefined,\n  child: React.ElementType,\n): boolean => {\n  const types = React.Children.map(children, item => {\n    if (!React.isValidElement(item)) return null\n    return item.type\n  })\n\n  return (types || []).includes(child)\n}\n\nexport const pickChild = (\n  children: ReactNode | undefined,\n  targetChild: React.ElementType,\n): [ReactNode | undefined, ReactNode | undefined] => {\n  let target: ReactNode[] = []\n  const withoutTargetChildren = React.Children.map(children, item => {\n    if (!React.isValidElement(item)) return item\n    if (item.type === targetChild) {\n      target.push(item)\n      return null\n    }\n    return item\n  })\n\n  const targetChildren = target.length >= 0 ? target : undefined\n\n  return [withoutTargetChildren, targetChildren]\n}\n\nexport const pickChildByProps = (\n  children: ReactNode | undefined,\n  key: string,\n  value: any,\n): [ReactNode | undefined, ReactNode | undefined] => {\n  let target: ReactNode[] = []\n  const isArray = Array.isArray(value)\n  const withoutPropChildren = React.Children.map(children, item => {\n    if (!React.isValidElement(item)) return null\n    if (!item.props) return item\n    if (isArray) {\n      if (value.includes(item.props[key])) {\n        target.push(item)\n        return null\n      }\n      return item\n    }\n    if (item.props[key] === value) {\n      target.push(item)\n      return null\n    }\n    return item\n  })\n\n  const targetChildren = target.length >= 0 ? target : undefined\n\n  return [withoutPropChildren, targetChildren]\n}\n\nexport const pickChildrenFirst = (\n  children: ReactNode | undefined,\n): ReactNode | undefined => {\n  return React.Children.toArray(children)[0]\n}\n\nexport const setChildrenProps = (\n  children: ReactNode | undefined,\n  props: Record<string, unknown>,\n  targetComponents: Array<React.ElementType> = [],\n): ReactNode | undefined => {\n  if (React.Children.count(children) === 0) return []\n  const allowAll = targetComponents.length === 0\n  const clone = (child: React.ReactElement, props = {}) =>\n    React.cloneElement(child, props)\n\n  return React.Children.map(children, item => {\n    if (!React.isValidElement(item)) return item\n    if (allowAll) return clone(item, props)\n\n    const isAllowed = targetComponents.find(child => child === item.type)\n    if (isAllowed) return clone(item, props)\n    return item\n  })\n}\n\nexport const setChildrenIndex = (\n  children: ReactNode | undefined,\n  targetComponents: Array<React.ElementType> = [],\n): ReactNode | undefined => {\n  if (React.Children.count(children) === 0) return []\n  const allowAll = targetComponents.length === 0\n  const clone = (child: React.ReactElement, props = {}) =>\n    React.cloneElement(child, props)\n  let index = 0\n\n  return React.Children.map(children, item => {\n    if (!React.isValidElement(item)) return item\n    index = index + 1\n    if (allowAll) return clone(item, { index })\n\n    const isAllowed = targetComponents.find(child => child === item.type)\n    if (isAllowed) return clone(item, { index })\n    index = index - 1\n    return item\n  })\n}\n\nexport const getReactNode = (\n  node?: React.ReactNode | (() => React.ReactNode),\n): React.ReactNode => {\n  if (!node) return null\n\n  if (typeof node !== 'function') return node\n  return (node as () => React.ReactNode)()\n}\n\nexport const isChildElement = (\n  parent: Element | null | undefined,\n  child: Element | null | undefined,\n): boolean => {\n  if (!parent || !child) return false\n  let node: (Node & ParentNode) | null = child\n  while (node) {\n    if (node === parent) return true\n    node = node.parentNode\n  }\n  return false\n}\n\nexport const isGeistElement = (el?: HTMLElement): boolean => {\n  if (!el) return false\n  if (el?.dataset && el?.dataset['geist']) return true\n  el.attributes.getNamedItem('data-geist')\n  return !!el.attributes.getNamedItem('data-geist')\n}\n\nexport const isBrowser = (): boolean => {\n  return Boolean(\n    typeof window !== 'undefined' && window.document && window.document.createElement,\n  )\n}\n\nexport const isMac = (): boolean => {\n  if (!isBrowser()) return false\n  return navigator.platform.toUpperCase().indexOf('MAC') >= 0\n}\n\nexport const isCSSNumberValue = (value?: string | number) =>\n  value !== undefined && !Number.isNaN(+value)\n"
  },
  {
    "path": "components/utils/color.ts",
    "content": "const hexToRgb = (color: string): [number, number, number] => {\n  const fullReg = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i\n  const full = color.replace(fullReg, (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`)\n  const values = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(full)\n  if (!values) {\n    throw new Error(`Geist UI: Unsupported ${color} color.`)\n  }\n  return [\n    Number.parseInt(values[1], 16),\n    Number.parseInt(values[2], 16),\n    Number.parseInt(values[3], 16),\n  ]\n}\n\nexport const colorToRgbValues = (color: string) => {\n  if (color.charAt(0) === '#') return hexToRgb(color)\n\n  const safeColor = color.replace(/ /g, '')\n  const colorType = color.substr(0, 4)\n\n  const regArray = safeColor.match(/\\((.+)\\)/)\n  if (!colorType.startsWith('rgb') || !regArray) {\n    console.log(color)\n    throw new Error(`Geist UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.`)\n  }\n\n  return regArray[1].split(',').map(str => Number.parseFloat(str))\n}\n\nexport const addColorAlpha = (color: string, alpha: number) => {\n  if (!/^#|rgb|RGB/.test(color)) return color\n  const [r, g, b] = colorToRgbValues(color)\n  const safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha\n  return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`\n}\n"
  },
  {
    "path": "components/utils/layouts.ts",
    "content": "import { MouseEvent, FocusEvent, MutableRefObject, useState } from 'react'\n\nexport const getElementOffset = (el?: HTMLElement | null | undefined) => {\n  if (!el)\n    return {\n      top: 0,\n      left: 0,\n    }\n  const { top, left } = el.getBoundingClientRect()\n  return { top, left }\n}\n\nexport interface ReactiveDomReact {\n  top: number\n  left: number\n  right: number\n  width: number\n  height: number\n  elementTop: number\n}\nconst defaultRect: ReactiveDomReact = {\n  top: -1000,\n  left: -1000,\n  right: -1000,\n  width: 0,\n  height: 0,\n  elementTop: -1000,\n}\n\nconst getRectFromDOMWithContainer = (\n  domRect?: DOMRect,\n  getContainer?: () => HTMLElement | null,\n): ReactiveDomReact => {\n  if (!domRect) return defaultRect\n  const container = getContainer ? getContainer() : null\n  const scrollElement = container || document.documentElement\n  const { top: offsetTop, left: offsetLeft } = getElementOffset(container)\n\n  return {\n    ...domRect,\n    width: domRect.width || domRect.right - domRect.left,\n    height: domRect.height || domRect.top - domRect.bottom,\n    top: domRect.bottom + scrollElement.scrollTop - offsetTop,\n    left: domRect.left + scrollElement.scrollLeft - offsetLeft,\n    elementTop: domRect.top + scrollElement.scrollTop - offsetTop,\n  }\n}\n\nexport const isUnplacedRect = (rect?: ReactiveDomReact): boolean => {\n  if (!rect) return true\n  return rect.top === defaultRect.top && rect.left === defaultRect.left\n}\n\nexport const getRefRect = (\n  ref?: MutableRefObject<HTMLElement | null>,\n  getContainer?: () => HTMLElement | null,\n): ReactiveDomReact => {\n  if (!ref || !ref.current) return defaultRect\n  const rect = ref.current.getBoundingClientRect()\n  return getRectFromDOMWithContainer(rect, getContainer)\n}\n\nexport const getEventRect = (\n  event?: MouseEvent<HTMLElement> | FocusEvent<HTMLElement>,\n  getContainer?: () => HTMLElement | null,\n) => {\n  const rect = (event?.target as HTMLElement)?.getBoundingClientRect()\n  if (!rect) return defaultRect\n  return getRectFromDOMWithContainer(rect, getContainer)\n}\n\nconst isRefTarget = (\n  eventOrRef:\n    | MouseEvent<HTMLElement>\n    | FocusEvent<HTMLElement>\n    | MutableRefObject<HTMLElement | null>,\n): eventOrRef is MutableRefObject<HTMLElement | null> => {\n  return typeof (eventOrRef as any)?.target === 'undefined'\n}\nexport const useRect = (initialState?: ReactiveDomReact | (() => ReactiveDomReact)) => {\n  const [rect, setRect] = useState<ReactiveDomReact>(initialState || defaultRect)\n\n  const updateRect = (\n    eventOrRef:\n      | MouseEvent<HTMLElement>\n      | FocusEvent<HTMLElement>\n      | MutableRefObject<HTMLElement | null>,\n    getContainer?: () => HTMLElement | null,\n  ) => {\n    if (isRefTarget(eventOrRef)) return setRect(getRefRect(eventOrRef, getContainer))\n    setRect(getEventRect(eventOrRef, getContainer))\n  }\n\n  return {\n    rect,\n    setRect: updateRect,\n  }\n}\n"
  },
  {
    "path": "components/utils/prop-types.ts",
    "content": "export const tuple = <T extends string[]>(...args: T) => args\n\nexport const tupleNumber = <T extends number[]>(...args: T) => args\n\nconst buttonTypes = tuple(\n  'default',\n  'secondary',\n  'success',\n  'warning',\n  'error',\n  'abort',\n  'secondary-light',\n  'success-light',\n  'warning-light',\n  'error-light',\n)\n\nconst normalTypes = tuple('default', 'secondary', 'success', 'warning', 'error')\n\nconst snippetTypes = tuple(\n  'default',\n  'secondary',\n  'success',\n  'warning',\n  'error',\n  'dark',\n  'lite',\n)\n\nconst cardTypes = tuple(\n  'default',\n  'secondary',\n  'success',\n  'warning',\n  'error',\n  'dark',\n  'lite',\n  'alert',\n  'purple',\n  'violet',\n  'cyan',\n)\n\nconst copyTypes = tuple('default', 'silent', 'prevent')\n\nconst triggerTypes = tuple('hover', 'click')\n\nconst placement = tuple(\n  'top',\n  'topStart',\n  'topEnd',\n  'left',\n  'leftStart',\n  'leftEnd',\n  'bottom',\n  'bottomStart',\n  'bottomEnd',\n  'right',\n  'rightStart',\n  'rightEnd',\n)\n\nconst dividerAlign = tuple('start', 'center', 'end', 'left', 'right')\n\nexport type ButtonTypes = typeof buttonTypes[number]\n\nexport type NormalTypes = typeof normalTypes[number]\n\nexport type SnippetTypes = typeof snippetTypes[number]\n\nexport type CardTypes = typeof cardTypes[number]\n\nexport type CopyTypes = typeof copyTypes[number]\n\nexport type TriggerTypes = typeof triggerTypes[number]\n\nexport type Placement = typeof placement[number]\n\nexport type DividerAlign = typeof dividerAlign[number]\n"
  },
  {
    "path": "components/utils/types.ts",
    "content": "\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends Record<string, any> ? DeepPartial<T[P]> : T[P]\n}\n"
  },
  {
    "path": "components/utils/use-body-scroll.ts",
    "content": "import useBodyScroll from '../use-body-scroll'\n\nexport default useBodyScroll\n"
  },
  {
    "path": "components/utils/use-click-anywhere.ts",
    "content": "import { useEffect } from 'react'\n\nconst useClickAnyWhere = (handler: (event: Event) => void) => {\n  useEffect(() => {\n    const callback = (event: Event) => handler(event)\n\n    document.addEventListener('click', callback)\n    return () => document.removeEventListener('click', callback)\n  }, [handler])\n}\n\nexport default useClickAnyWhere\n"
  },
  {
    "path": "components/utils/use-click-away.ts",
    "content": "import { default as useClickAway } from '../use-click-away'\n\nexport default useClickAway\n"
  },
  {
    "path": "components/utils/use-clipboard.ts",
    "content": "import useClipboard from '../use-clipboard'\n\nexport default useClipboard\n"
  },
  {
    "path": "components/utils/use-context-state/create-geist-context.tsx",
    "content": "import React, { useImperativeHandle } from 'react'\nimport useContextState, {\n  ContextHandler,\n  ContextHandlerWhere,\n  ContextStateFilter,\n  ContextStateOnChange,\n  ContextStates,\n} from './use-context-state'\nimport { capitalize } from '../collections'\n\nconst makeVirtualValues = <S,>(values: S): ContextStates<S> => {\n  const keys = Object.keys(values) as Array<keyof S>\n  const handlers = keys.reduce<ContextHandler<S>>((pre, current) => {\n    const updateHandler = {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      [`set${capitalize(current)}`]: (_next: S[typeof current]) => {},\n    }\n    return { ...pre, ...updateHandler }\n  }, {} as ContextHandler<S>)\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const update: ContextHandlerWhere<S> = (_key, _next) => {}\n  return {\n    update,\n    ...values,\n    ...handlers,\n  }\n}\n\nexport type GeistNamedContext<T, N> = {\n  [key in string as `use${Capitalize<string & N>}Context`]: () => T\n}\n\nexport type GeistNamedProvider<T, N> = {\n  [key in string as `${Capitalize<string & N>}Provider`]: T\n}\n\nexport const createGeistContext = <S extends Record<string, unknown>, N extends string>(\n  name: N,\n  initialStates: S,\n) => {\n  const virtualValues = makeVirtualValues(initialStates)\n  const Context = React.createContext<ContextStates<S>>(virtualValues)\n\n  type GeistContextProps = {\n    defaultValues?: Partial<S> | (() => Partial<S>)\n    onChange?: ContextStateOnChange<S>\n    onChangeBefore?: ContextStateFilter<S>\n  }\n\n  const GeistContext = React.forwardRef<S, React.PropsWithChildren<GeistContextProps>>(\n    ({ defaultValues, children, onChange, onChangeBefore }, ref) => {\n      const initialValues =\n        typeof defaultValues === 'function' ? (defaultValues as () => S)() : defaultValues\n      const mergedValues = {\n        ...initialStates,\n        ...initialValues,\n      } as Required<S>\n      const [states, , statesRef] = useContextState(mergedValues, {\n        onChange: onChange ? onChange : () => {},\n        filter: onChangeBefore ? onChangeBefore : () => true,\n      })\n\n      useImperativeHandle(ref, () => statesRef.current, [statesRef.current])\n\n      return <Context.Provider value={states}>{children}</Context.Provider>\n    },\n  )\n\n  type ResultType = GeistNamedProvider<typeof GeistContext, N> &\n    GeistNamedContext<ContextStates<S>, N>\n\n  return {\n    [`${capitalize(name)}Provider`]: GeistContext,\n    [`use${capitalize(name)}Context`]: () => React.useContext<ContextStates<S>>(Context),\n  } as ResultType\n}\n"
  },
  {
    "path": "components/utils/use-context-state/use-context-state.ts",
    "content": "import { Dispatch, MutableRefObject, SetStateAction, useMemo } from 'react'\nimport useCurrentState from '../use-current-state'\nimport { capitalize } from '../collections'\n\nexport type ContextStateOnChange<T> = <K extends keyof T>(key: K, nextValue: T[K]) => void\nexport type ContextHandler<S> = {\n  [K in keyof S as `set${Capitalize<string & K>}`]: (next: S[K]) => void\n}\n\nexport type ContextHandlerWhere<T> = <K extends keyof T>(key: K, next: T[K]) => void\nexport type ContextStates<S> = S & ContextHandler<S> & { update: ContextHandlerWhere<S> }\nexport type ContextStatesType<S> = [\n  ContextStates<S>,\n  Dispatch<SetStateAction<S>>,\n  MutableRefObject<S>,\n]\n\nexport type ContextStateFilter<T> = <K extends keyof T>(\n  key: K,\n  nextValue: T[K],\n) => boolean\n\nconst useContextState = <S extends Record<string, unknown>>(\n  initialState: Required<S> | (() => Required<S>),\n  options?: {\n    filter?: ContextStateFilter<S>\n    onChange?: ContextStateOnChange<S>\n  },\n): ContextStatesType<S> => {\n  const [state, setState, stateRef] = useCurrentState(initialState)\n\n  const update: ContextHandlerWhere<S> = (key, next) => {\n    const allowChange = options?.filter ? options?.filter(key, next) : true\n    if (!allowChange) return\n    setState(last => ({ ...last, [key]: next }))\n    options?.onChange && options?.onChange(key, next)\n  }\n  const makeUpdates = () => {\n    const keys = Object.keys(state) as Array<keyof S>\n    return keys.reduce<ContextHandler<S>>((pre, current) => {\n      const updateHandler = {\n        [`set${capitalize(current)}`]: (nextValue: S[typeof current]) => {\n          update(current, nextValue)\n        },\n      }\n      return { ...pre, ...updateHandler }\n    }, {} as ContextHandler<S>)\n  }\n  const updates: ContextHandler<S> = makeUpdates()\n\n  const stateMemo = useMemo<ContextStates<S>>(\n    () => ({\n      update,\n      ...state,\n      ...updates,\n    }),\n    [state],\n  )\n\n  return [stateMemo, setState, stateRef]\n}\n\nexport default useContextState\n"
  },
  {
    "path": "components/utils/use-current-state.ts",
    "content": "import useCurrentState from '../use-current-state'\n\nexport default useCurrentState\n"
  },
  {
    "path": "components/utils/use-default-props.ts",
    "content": "const useDefaultProps = <T extends Record<string | number, any>, D extends Partial<T>>(\n  props: T,\n  defaultProps: D,\n): T & Required<D> => {\n  let nextProps = {} as T\n  const propsKeys: Array<keyof T> = Object.keys(props || {})\n  const defaultKeys: Array<keyof T> = Object.keys(defaultProps || {})\n\n  for (const propsName of propsKeys) {\n    nextProps[propsName] = props[propsName] as T[keyof T]\n  }\n\n  for (const defaultName of defaultKeys) {\n    if (props[defaultName] === undefined) {\n      nextProps[defaultName] = defaultProps[defaultName] as T[keyof T]\n    }\n  }\n  return nextProps as T & Required<D>\n}\n\nexport default useDefaultProps\n"
  },
  {
    "path": "components/utils/use-dom-observer.ts",
    "content": "import { MutableRefObject, useEffect } from 'react'\n\nconst useDOMObserver = (\n  ref: MutableRefObject<HTMLElement | null> | undefined,\n  callback: MutationCallback = () => {},\n) => {\n  const config = { attributes: false, childList: true, subtree: true }\n\n  useEffect(() => {\n    if (!ref || !ref.current) return\n    let unmount = false\n    const done: MutationCallback = (...params) => {\n      if (unmount) return\n      callback(...params)\n    }\n    const observer = new MutationObserver(done)\n    observer.observe(ref.current, config)\n    return () => {\n      unmount = true\n      observer.disconnect()\n    }\n  }, [ref])\n}\n\nexport default useDOMObserver\n"
  },
  {
    "path": "components/utils/use-drag.ts",
    "content": "import { RefObject, useEffect, useRef } from 'react'\nimport useCurrentState from './use-current-state'\n\nexport type DraggingEvent = {\n  startX: number\n  currentX: number\n}\n\nexport type DraggingHandler = (event: DraggingEvent) => void\n\nconst useDrag = (\n  elementRef: RefObject<HTMLElement> | null,\n  draggingHandler: DraggingHandler = () => {},\n  dragStartHandler: DraggingHandler = () => {},\n  dragEndHandler: DraggingHandler = () => {},\n) => {\n  const onDragging = useRef<boolean>(false)\n  const [, setStartX, startXRef] = useCurrentState<number>(0)\n  const [, setCurrentX, currentXRef] = useCurrentState<number>(0)\n\n  const getCustomEvent = () => ({\n    startX: startXRef.current,\n    currentX: currentXRef.current,\n  })\n\n  const elementMouseDownHandler = (event: MouseEvent) => {\n    event.stopPropagation()\n    event.stopImmediatePropagation()\n    onDragging.current = true\n    if (!elementRef || !elementRef.current) return\n    setStartX(elementRef.current.getBoundingClientRect().x)\n    dragStartHandler(getCustomEvent())\n  }\n  const globalDraggingHandler = (event: MouseEvent | TouchEvent) => {\n    if (!onDragging.current) return\n    if (event.type === 'touchmove') {\n      setCurrentX((event as TouchEvent).changedTouches[0].clientX)\n    } else {\n      setCurrentX((event as MouseEvent).clientX)\n    }\n    draggingHandler(getCustomEvent())\n  }\n  const globalDragEndHandler = () => {\n    if (!onDragging.current) return\n    onDragging.current = false\n    dragEndHandler(getCustomEvent())\n  }\n\n  useEffect(() => {\n    if (!elementRef || !elementRef.current) return\n    elementRef.current.addEventListener('mousedown', elementMouseDownHandler)\n    elementRef.current.addEventListener('touchstart', elementMouseDownHandler)\n\n    window.addEventListener('mousemove', globalDraggingHandler)\n    window.addEventListener('touchmove', globalDraggingHandler)\n    window.addEventListener('mouseup', globalDragEndHandler)\n    window.addEventListener('touchend', globalDragEndHandler)\n\n    return () => {\n      window.removeEventListener('mousemove', globalDraggingHandler)\n      window.removeEventListener('touchmove', globalDraggingHandler)\n      window.removeEventListener('mouseup', globalDragEndHandler)\n      window.removeEventListener('touchend', globalDragEndHandler)\n\n      if (!elementRef || !elementRef.current) return\n      elementRef.current.removeEventListener('mousedown', elementMouseDownHandler)\n      elementRef.current.removeEventListener('touchstart', elementMouseDownHandler)\n    }\n  }, [elementRef])\n}\n\nexport default useDrag\n"
  },
  {
    "path": "components/utils/use-geist-ui-context.ts",
    "content": "import React from 'react'\nimport type { ToastLayout, Toast } from '../use-toasts/use-toast'\n\nexport const defaultToastLayout: Required<ToastLayout> = {\n  padding: '12px 16px',\n  margin: '8px 0',\n  width: '420px',\n  maxWidth: '90vw',\n  maxHeight: '75px',\n  placement: 'bottomRight',\n}\n\nexport type UpdateToastsFunction = (fn: (toasts: Array<Toast>) => Array<Toast>) => any\nexport type UpdateToastsLayoutFunction = (\n  fn: (layout: Required<ToastLayout>) => Required<ToastLayout>,\n) => any\nexport type UpdateToastsIDFunction = (fn: () => string | null) => any\n\nexport interface GeistUIContextParams {\n  toasts: Array<Toast>\n  updateToasts: UpdateToastsFunction\n  toastLayout: Required<ToastLayout>\n  updateToastLayout: UpdateToastsLayoutFunction\n  lastUpdateToastId: string | null\n  updateLastToastId: UpdateToastsIDFunction\n}\n\nconst defaultParams: GeistUIContextParams = {\n  toasts: [],\n  toastLayout: defaultToastLayout,\n  updateToastLayout: t => t,\n  updateToasts: t => t,\n  lastUpdateToastId: null,\n  updateLastToastId: () => null,\n}\n\nexport const GeistUIContent: React.Context<GeistUIContextParams> =\n  React.createContext<GeistUIContextParams>(defaultParams)\n\nexport const useGeistUIContext = (): GeistUIContextParams =>\n  React.useContext<GeistUIContextParams>(GeistUIContent)\n"
  },
  {
    "path": "components/utils/use-portal.ts",
    "content": "import { useEffect, useState } from 'react'\nimport useSSR from '../utils/use-ssr'\nimport { getId } from './collections'\n\nconst createElement = (id: string): HTMLElement => {\n  const el = document.createElement('div')\n  el.setAttribute('id', id)\n  return el\n}\n\nconst usePortal = (\n  selectId: string = getId(),\n  getContainer?: () => HTMLElement | null,\n): HTMLElement | null => {\n  const id = `geist-ui-${selectId}`\n  const { isBrowser } = useSSR()\n  const [elSnapshot, setElSnapshot] = useState<HTMLElement | null>(\n    isBrowser ? createElement(id) : null,\n  )\n\n  useEffect(() => {\n    const customContainer = getContainer ? getContainer() : null\n    const parentElement = customContainer || document.body\n    const hasElement = parentElement.querySelector<HTMLElement>(`#${id}`)\n    const el = hasElement || createElement(id)\n\n    if (!hasElement) {\n      parentElement.appendChild(el)\n    }\n    setElSnapshot(el)\n  }, [])\n\n  return elSnapshot\n}\n\nexport default usePortal\n"
  },
  {
    "path": "components/utils/use-previous.ts",
    "content": "import { useEffect, useRef } from 'react'\n\nconst usePrevious = <T>(state: T): T | undefined | null => {\n  const ref = useRef<T | null>(null)\n\n  useEffect(() => {\n    ref.current = state\n  })\n\n  return ref ? ref.current : null\n}\n\nexport default usePrevious\n"
  },
  {
    "path": "components/utils/use-real-shape.ts",
    "content": "import { MutableRefObject, useEffect, useState } from 'react'\n\nexport type ShapeType = {\n  width: number\n  height: number\n}\n\nexport const getRealShape = (el: HTMLElement | null): ShapeType => {\n  const defaultShape: ShapeType = { width: 0, height: 0 }\n  if (!el || typeof window === 'undefined') return defaultShape\n\n  const rect = el.getBoundingClientRect()\n  const { width, height } = window.getComputedStyle(el)\n\n  const getCSSStyleVal = (str: string, parentNum: number) => {\n    if (!str) return 0\n    const strVal = str.includes('px')\n      ? +str.split('px')[0]\n      : str.includes('%')\n      ? +str.split('%')[0] * parentNum * 0.01\n      : str\n\n    return Number.isNaN(+strVal) ? 0 : +strVal\n  }\n\n  return {\n    width: getCSSStyleVal(`${width}`, rect.width),\n    height: getCSSStyleVal(`${height}`, rect.height),\n  }\n}\n\nexport type ShapeResult = [ShapeType, () => void]\n\nconst useRealShape = <T extends HTMLElement>(\n  ref: MutableRefObject<T | null>,\n): ShapeResult => {\n  const [state, setState] = useState<ShapeType>({\n    width: 0,\n    height: 0,\n  })\n  const update = () => {\n    const { width, height } = getRealShape(ref.current)\n    setState({ width, height })\n  }\n  useEffect(() => update(), [ref.current])\n\n  return [state, update]\n}\n\nexport default useRealShape\n"
  },
  {
    "path": "components/utils/use-resize.ts",
    "content": "import { useEffect } from 'react'\n\nconst useResize = (callback: () => unknown, immediatelyInvoke: boolean = true): void => {\n  useEffect(() => {\n    const fn = () => callback()\n    if (immediatelyInvoke) {\n      fn()\n    }\n    window.addEventListener('resize', fn)\n    return () => window.removeEventListener('resize', fn)\n  }, [])\n}\n\nexport default useResize\n"
  },
  {
    "path": "components/utils/use-ssr.ts",
    "content": "import { useEffect, useState } from 'react'\nimport { isBrowser } from './collections'\n\nexport type SSRState = {\n  isBrowser: boolean\n  isServer: boolean\n}\n\nconst useSSR = (): SSRState => {\n  const [browser, setBrowser] = useState<boolean>(false)\n  useEffect(() => {\n    setBrowser(isBrowser())\n  }, [])\n\n  return {\n    isBrowser: browser,\n    isServer: !browser,\n  }\n}\n\nexport default useSSR\n"
  },
  {
    "path": "components/utils/use-warning.ts",
    "content": "const warningStack: { [key: string]: boolean } = {}\n\nconst useWarning = (message: string, component?: string) => {\n  const tag = component ? ` [${component}]` : ' '\n  const log = `[Geist UI]${tag}: ${message}`\n\n  if (typeof console === 'undefined') return\n  if (warningStack[log]) return\n  warningStack[log] = true\n\n  if (process.env.NODE_ENV !== 'production') {\n    return console.error(log)\n  }\n\n  console.warn(log)\n}\n\nexport default useWarning\n"
  },
  {
    "path": "examples/create-next-app/.eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": "examples/create-next-app/README.md",
    "content": "# Next.js demo for Geist UI\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n"
  },
  {
    "path": "examples/create-next-app/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "examples/create-next-app/next.config.js",
    "content": "module.exports = {\n  reactStrictMode: false,\n}\n"
  },
  {
    "path": "examples/create-next-app/package.json",
    "content": "{\n  \"name\": \"geist-ui-nextjs\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\"\n  },\n  \"dependencies\": {\n    \"@geist-ui/core\": \"latest\",\n    \"next\": \"^12.0.8\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^17.0.38\",\n    \"typescript\": \"^4.5.4\",\n    \"eslint\": \"8.7.0\",\n    \"eslint-config-next\": \"12.0.8\"\n  }\n}\n"
  },
  {
    "path": "examples/create-next-app/pages/_app.tsx",
    "content": "import type { AppProps } from 'next/app'\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    <GeistProvider>\n      <CssBaseline />\n      <Component {...pageProps} />\n    </GeistProvider>\n  )\n}\nexport default MyApp\n"
  },
  {
    "path": "examples/create-next-app/pages/_document.js",
    "content": "import Document, { Html, Head, Main, NextScript } from 'next/document'\nimport { CssBaseline } from '@geist-ui/core'\n\nclass MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx)\n    const styles = CssBaseline.flush()\n\n    return {\n      ...initialProps,\n      styles: (\n        <>\n          {initialProps.styles}\n          {styles}\n        </>\n      ),\n    }\n  }\n\n  render() {\n    return (\n      <Html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    )\n  }\n}\n\nexport default MyDocument\n"
  },
  {
    "path": "examples/create-next-app/pages/index.tsx",
    "content": "import Head from 'next/head'\nimport { Page, Text, Image, Display, Button, Grid } from '@geist-ui/core'\n\nconst gh = 'https://github.com/geist-org/geist-ui'\nconst docs = 'https://geist-ui.dev'\n\nexport default function Home() {\n  const redirect = (url: string) => window.open(url)\n\n  return (\n    <div>\n      <Head>\n        <title>Geist UI with NextJS</title>\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n      <Page dotBackdrop width=\"800px\" padding={0}>\n        <Display\n          title=\"Geist UI\"\n          caption={\n            <>\n              Welcome to{' '}\n              <Text span b>\n                Geist UI\n              </Text>{' '}\n              and start learning more !\n            </>\n          }>\n          <Image src=\"/geist-banner.png\" alt=\"geist ui banner\" draggable={false} />\n        </Display>\n        <Grid.Container justify=\"center\" gap={3} mt=\"100px\">\n          <Grid xs={20} sm={7} justify=\"center\">\n            <Button\n              shadow\n              type=\"secondary-light\"\n              width=\"100%\"\n              onClick={() => redirect(gh)}>\n              GitHub Repo\n            </Button>\n          </Grid>\n          <Grid xs={0} sm={3} />\n          <Grid xs={20} sm={7} justify=\"center\">\n            <Button width=\"100%\" onClick={() => redirect(docs)}>\n              Documentation Site\n            </Button>\n          </Grid>\n        </Grid.Container>\n      </Page>\n    </div>\n  )\n}\n"
  },
  {
    "path": "examples/create-next-app/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true\n  },\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\"\n  ],\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}\n"
  },
  {
    "path": "examples/create-react-app/README.md",
    "content": "## Create React App Example\n\nThis example have been moved here: [geist-ui/react-getting-started](https://github.com/geist-org/react-getting-started)\n"
  },
  {
    "path": "examples/custom-styles/README.md",
    "content": "## Custom styles\n\nThis is an example of **how to override styles in `geist-ui`**.\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm i && npm run dev\n# or\nyarn && yarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n"
  },
  {
    "path": "examples/custom-styles/package.json",
    "content": "{\n  \"name\": \"custom-styles\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"dev\": \"react-scripts start\",\n    \"build\": \"react-scripts build\"\n  },\n  \"dependencies\": {\n    \"@geist-ui/core\": \"latest\",\n    \"react\": \"^16.13.1\",\n    \"react-dom\": \"^16.13.1\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^16.9.32\",\n    \"@types/react-dom\": \"^16.9.6\",\n    \"react-scripts\": \"^3.4.1\"\n  }\n}\n"
  },
  {
    "path": "examples/custom-styles/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>Custom styles</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/custom-styles/src/home.jsx",
    "content": "import React from 'react'\nimport { Card, Text } from '@geist-ui/core'\nimport './style.css'\n\nconst Home = () => (\n  <div className=\"my-app\">\n    <Card shadow style={{ width: '500px', margin: '100px auto' }}>\n      <Text className=\"my-text\">Modern and minimalist React UI library.</Text>\n      <Text type={'success'} style={{ color: '#000' }}>\n        Modern and minimalist React UI library.\n      </Text>\n      <Text type={'warning'} style={{ color: '#000' }}>\n        Modern and minimalist React UI library.{' '}\n      </Text>\n      <Text type={'error'} style={{ color: '#000' }}>\n        Modern and minimalist React UI library.{' '}\n      </Text>\n      <Text type={'secondary'} style={{ color: '#000' }}>\n        Modern and minimalist React UI library.\n      </Text>\n    </Card>\n  </div>\n)\n\nexport default Home\n"
  },
  {
    "path": "examples/custom-styles/src/index.jsx",
    "content": "import React from 'react'\nimport ReactDom from 'react-dom'\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\nimport Home from './home'\n\nconst App = () => {\n  return (\n    <GeistProvider>\n      <CssBaseline />\n      <Home />\n    </GeistProvider>\n  )\n}\n\nReactDom.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('app'),\n)\n\nexport default App\n"
  },
  {
    "path": "examples/custom-styles/src/style.css",
    "content": ".my-app .my-text {\n  font-size: 1rem;\n  color: #000;\n  text-transform: uppercase;\n  display: inline-flex;\n  width: 100%;\n  margin: 1rem auto !important;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n"
  },
  {
    "path": "examples/custom-themes/README.md",
    "content": "## Custom themes\n\nThis is an example of **how to custom Themes in `geist-ui`**.\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm i && npm run dev\n# or\nyarn && yarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n"
  },
  {
    "path": "examples/custom-themes/package.json",
    "content": "{\n  \"name\": \"custom-themes\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"dev\": \"react-scripts start\",\n    \"build\": \"react-scripts build\"\n  },\n  \"dependencies\": {\n    \"@geist-ui/core\": \"latest\",\n    \"react\": \"^16.13.1\",\n    \"react-dom\": \"^16.13.1\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^16.9.32\",\n    \"@types/react-dom\": \"^16.9.6\",\n    \"react-scripts\": \"^3.4.1\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "examples/custom-themes/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>Custom themes</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/custom-themes/src/home.jsx",
    "content": "import React from 'react'\nimport { Text, Tag, useTheme, Select } from '@geist-ui/core'\n\nconst Home = ({ onThemeChange }) => {\n  const theme = useTheme()\n  const changeHandler = val => {\n    onThemeChange && onThemeChange(val)\n  }\n\n  return (\n    <div>\n      <Select size=\"small\" value={theme.type} onChange={changeHandler}>\n        <Select.Option label>System preset</Select.Option>\n        <Select.Option value=\"light\">Light</Select.Option>\n        <Select.Option value=\"dark\">Dark</Select.Option>\n        <Select.Option label>My custom</Select.Option>\n        <Select.Option value=\"green\">Green</Select.Option>\n        <Select.Option value=\"red\">Red</Select.Option>\n      </Select>\n\n      <Text type={'success'}>\n        Success. <Tag>{theme.palette.success}</Tag>\n      </Text>\n      <Text type={'warning'}>\n        Warning. <Tag>{theme.palette.warning}</Tag>\n      </Text>\n      <Text type={'error'}>\n        Error. <Tag>{theme.palette.error}</Tag>\n      </Text>\n      <Text type={'secondary'}>\n        Secondary (Uncovered). <Tag>{theme.palette.secondary}</Tag>\n      </Text>\n    </div>\n  )\n}\n\nexport default Home\n"
  },
  {
    "path": "examples/custom-themes/src/index.jsx",
    "content": "import React, { useState } from 'react'\nimport ReactDom from 'react-dom'\nimport { GeistProvider, CssBaseline, Page, Text } from '@geist-ui/core'\nimport { greenTheme, redTheme } from './theme'\nimport Home from './home'\n\nconst App = () => {\n  const [theme, setTheme] = useState('light')\n  return (\n    <GeistProvider themes={[greenTheme, redTheme]} themeType={theme}>\n      <CssBaseline />\n      <Page size=\"mini\" dotBackdrop>\n        <Page.Header>\n          <Text h2>Custom themes for Geist UI</Text>\n        </Page.Header>\n        <Home onThemeChange={next => setTheme(next)} />\n      </Page>\n    </GeistProvider>\n  )\n}\n\nReactDom.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('app'),\n)\n\nexport default App\n"
  },
  {
    "path": "examples/custom-themes/src/theme.js",
    "content": "/**\n * Just customize what you need, deep merge themes by default.\n *\n * If you are using TypeScript, please use the following type definition.\n * If you are using JavaScript, refer to https://github.com/geist-org/geist-ui/blob/master/components/themes/presets/index.ts\n */\n\n// import {\n//   GeistUIThemes,\n//   GeistUIThemesPalette,\n//   GeistUIThemesExpressiveness,\n//   GeistUIThemesLayout,\n//   GeistUIThemesFont,\n// } from '@geist-ui/core'\nimport { Themes } from '@geist-ui/core'\n\nexport const greenTheme = Themes.createFromLight({\n  type: 'green',\n  palette: {\n    success: 'green',\n    warning: 'green',\n    error: 'green',\n  },\n})\n\nexport const redTheme = Themes.createFromLight({\n  type: 'red',\n  palette: {\n    success: 'red',\n    warning: 'red',\n    error: 'red',\n  },\n})\n"
  },
  {
    "path": "examples/extends-components/README.md",
    "content": "## Extends Components\n\nThis is an example of **how to inherit components in `geist-ui`**.\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm i && npm run dev\n# or\nyarn && yarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n"
  },
  {
    "path": "examples/extends-components/package.json",
    "content": "{\n  \"name\": \"geist-ui-react-extends-components\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"dependencies\": {\n    \"@geist-ui/core\": \"latest\",\n    \"react\": \"^16.12.0\",\n    \"react-dom\": \"^16.12.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"16.9.19\",\n    \"@types/react-dom\": \"16.9.5\",\n    \"react-scripts\": \"^3.4.1\",\n    \"typescript\": \"3.7.5\"\n  },\n  \"scripts\": {\n    \"dev\": \"react-scripts start\",\n    \"build\": \"react-scripts build\"\n  },\n  \"browserslist\": [\n    \">0.2%\",\n    \"not dead\",\n    \"not ie <= 11\",\n    \"not op_mini all\"\n  ]\n}\n"
  },
  {
    "path": "examples/extends-components/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>Extends Components</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/extends-components/src/app.tsx",
    "content": "import * as React from 'react'\nimport MyInput from './my-input'\nimport { GeistProvider, CssBaseline, Page } from '@geist-ui/core'\n\nexport default function App() {\n  return (\n    <GeistProvider>\n      <CssBaseline />\n      <Page size=\"mini\">\n        <MyInput error=\"this is required\" placeholder=\"my input\" />\n      </Page>\n    </GeistProvider>\n  )\n}\n"
  },
  {
    "path": "examples/extends-components/src/index.tsx",
    "content": "import * as React from 'react'\nimport { render } from 'react-dom'\n\nimport App from './app'\n\nconst rootElement = document.getElementById('app')\nrender(<App />, rootElement)\n"
  },
  {
    "path": "examples/extends-components/src/my-input.tsx",
    "content": "import React, { ReactElement } from 'react'\nimport { Input, Spacer, Text } from '@geist-ui/core'\n\ntype InputErrorType = {\n  error?: string\n}\n\nconst MyInput: React.FC<InputErrorType & React.ComponentProps<typeof Input>> = ({\n  error = null,\n  ...inputProps\n}): ReactElement => {\n  const hasError = Boolean(error)\n  const { status } = inputProps\n  return (\n    <>\n      <Input status={hasError ? 'error' : status} {...inputProps} />\n      {hasError && (\n        <>\n          <Spacer h={0.4} />\n          <Text small type=\"error\" size=\"var(--size-xs2)\">\n            {error}\n          </Text>\n        </>\n      )}\n    </>\n  )\n}\n\nexport default MyInput\n"
  },
  {
    "path": "examples/extends-components/src/react-app-env.d.ts",
    "content": "/// <reference types=\"react-scripts\" />\n"
  },
  {
    "path": "examples/extends-components/tsconfig.json",
    "content": "{\n  \"include\": [\n    \"./src/*\"\n  ],\n  \"compilerOptions\": {\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"lib\": [\n      \"dom\",\n      \"es2015\"\n    ],\n    \"jsx\": \"react\",\n    \"target\": \"es5\",\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true\n  }\n}\n"
  },
  {
    "path": "examples/remix/README.md",
    "content": "# Remix demo for Geist UI\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/routes/index.tsx`. The page auto-updates as you edit the file.\n\n## Learn More\n\nTo learn more about Remix, take a look at the following resources:\n\n- [Remix v1](https://remix.run/docs/en/v1) - learn about Next.js features and API.\n"
  },
  {
    "path": "examples/remix/api/index.js",
    "content": "const { createRequestHandler } = require('@remix-run/vercel')\n\nmodule.exports = createRequestHandler({\n  build: require('./_build'),\n})\n"
  },
  {
    "path": "examples/remix/app/entry.client.tsx",
    "content": "import { hydrate } from 'react-dom'\nimport { RemixBrowser } from 'remix'\n\nhydrate(<RemixBrowser />, document)\n"
  },
  {
    "path": "examples/remix/app/entry.server.tsx",
    "content": "import { renderToString } from 'react-dom/server'\nimport { RemixServer } from 'remix'\nimport type { EntryContext } from 'remix'\nimport { CssBaseline } from '@geist-ui/core'\n\nexport default function handleRequest(\n  request: Request,\n  responseStatusCode: number,\n  responseHeaders: Headers,\n  remixContext: EntryContext,\n) {\n  let markup = renderToString(<RemixServer context={remixContext} url={request.url} />)\n  markup = markup.replace('__STYLES__', CssBaseline.flushToHTML())\n\n  responseHeaders.set('Content-Type', 'text/html')\n\n  return new Response('<!DOCTYPE html>' + markup, {\n    status: responseStatusCode,\n    headers: responseHeaders,\n  })\n}\n"
  },
  {
    "path": "examples/remix/app/root.tsx",
    "content": "import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from 'remix'\nimport type { MetaFunction } from 'remix'\nimport { CssBaseline, GeistProvider } from '@geist-ui/core'\n\nexport const meta: MetaFunction = () => {\n  return { title: 'Geist with Remix' }\n}\n\nexport default function App() {\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n        <Meta />\n        <Links />\n        {typeof document === 'undefined' ? '__STYLES__' : null}\n      </head>\n      <body>\n        <GeistProvider>\n          <CssBaseline />\n          <Outlet />\n        </GeistProvider>\n        <ScrollRestoration />\n        <Scripts />\n        {process.env.NODE_ENV === 'development' && <LiveReload />}\n      </body>\n    </html>\n  )\n}\n"
  },
  {
    "path": "examples/remix/app/routes/index.tsx",
    "content": "import { Card, Page, Text } from '@geist-ui/core'\n\nexport default function Index() {\n  return (\n    <Page>\n      <Card>\n        <Text>Hello, Geist with Remix</Text>\n      </Card>\n    </Page>\n  )\n}\n"
  },
  {
    "path": "examples/remix/package.json",
    "content": "{\n  \"name\": \"geist-remix\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"build\": \"remix build\",\n    \"dev\": \"remix dev\",\n    \"postinstall\": \"remix setup node\"\n  },\n  \"prettier\": \"@geist-ui/prettier-config\",\n  \"dependencies\": {\n    \"@geist-ui/core\": \"latest\",\n    \"@remix-run/react\": \"^1.1.3\",\n    \"@remix-run/serve\": \"^1.1.3\",\n    \"@remix-run/vercel\": \"^1.1.3\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"remix\": \"^1.1.3\"\n  },\n  \"devDependencies\": {\n    \"@geist-ui/prettier-config\": \"^1.0.1\",\n    \"@remix-run/dev\": \"^1.1.3\",\n    \"@types/react\": \"^17.0.24\",\n    \"@types/react-dom\": \"^17.0.9\",\n    \"prettier\": \"^2.5.1\",\n    \"typescript\": \"^4.1.2\"\n  },\n  \"engines\": {\n    \"node\": \">=14\"\n  },\n  \"sideEffects\": false\n}\n"
  },
  {
    "path": "examples/remix/remix.config.js",
    "content": "/**\n * @type {import('@remix-run/dev/config').AppConfig}\n */\nmodule.exports = {\n  appDirectory: 'app',\n  assetsBuildDirectory: 'public/build',\n  publicPath: '/build/',\n  serverBuildDirectory: 'api/_build',\n  ignoredRouteFiles: ['.*'],\n}\n"
  },
  {
    "path": "examples/remix/remix.env.d.ts",
    "content": "/// <reference types=\"@remix-run/dev\" />\n/// <reference types=\"@remix-run/node/globals\" />\n"
  },
  {
    "path": "examples/remix/tsconfig.json",
    "content": "{\n  \"include\": [\"remix.env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n  \"compilerOptions\": {\n    \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES2019\"],\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"jsx\": \"react-jsx\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"target\": \"ES2019\",\n    \"strict\": true,\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"~/*\": [\"./app/*\"]\n    },\n\n    // Remix takes care of building everything in `remix build`.\n    \"noEmit\": true\n  }\n}\n"
  },
  {
    "path": "examples/remix/vercel.json",
    "content": "{\n  \"build\": {\n    \"env\": {\n      \"ENABLE_FILE_SYSTEM_API\": \"1\"\n    }\n  }\n}\n"
  },
  {
    "path": "examples/tree-shaking-create-react-app/README.md",
    "content": "## Tree shaking for create react app\n\nFull tree-shaking is automatically available without any configuration when using `react-scripts 5.0.0` or higher. (`webpack > 5.0`)\n"
  },
  {
    "path": "examples/tree-shaking-create-react-app/build/asset-manifest.json",
    "content": "{\n  \"files\": {\n    \"main.js\": \"/static/js/main.c0df7028.js\",\n    \"index.html\": \"/index.html\",\n    \"main.c0df7028.js.map\": \"/static/js/main.c0df7028.js.map\"\n  },\n  \"entrypoints\": [\n    \"static/js/main.c0df7028.js\"\n  ]\n}"
  },
  {
    "path": "examples/tree-shaking-create-react-app/build/index.html",
    "content": "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/><title>Tree Shaking</title><script defer=\"defer\" src=\"/static/js/main.c0df7028.js\"></script></head><body><div id=\"app\"></div></body></html>"
  },
  {
    "path": "examples/tree-shaking-create-react-app/build/static/js/main.c0df7028.js",
    "content": "/*! For license information please see main.c0df7028.js.LICENSE.txt */\n!function(){\"use strict\";var e={725:function(e){var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function a(e){if(null===e||void 0===e)throw new TypeError(\"Object.assign cannot be called with null or undefined\");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String(\"abc\");if(e[5]=\"de\",\"5\"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t[\"_\"+String.fromCharCode(n)]=n;if(\"0123456789\"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(\"\"))return!1;var r={};return\"abcdefghijklmnopqrst\".split(\"\").forEach((function(e){r[e]=e})),\"abcdefghijklmnopqrst\"===Object.keys(Object.assign({},r)).join(\"\")}catch(a){return!1}}()?Object.assign:function(e,o){for(var l,i,u=a(e),c=1;c<arguments.length;c++){for(var s in l=Object(arguments[c]))n.call(l,s)&&(u[s]=l[s]);if(t){i=t(l);for(var f=0;f<i.length;f++)r.call(l,i[f])&&(u[i[f]]=l[i[f]])}}return u}},463:function(e,t,n){var r=n(791),a=n(725),o=n(296);function l(e){for(var t=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+e,n=1;n<arguments.length;n++)t+=\"&args[]=\"+encodeURIComponent(arguments[n]);return\"Minified React error #\"+e+\"; visit \"+t+\" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\"}if(!r)throw Error(l(227));var i=new Set,u={};function c(e,t){s(e,t),s(e+\"Capture\",t)}function s(e,t){for(u[e]=t,e=0;e<t.length;e++)i.add(t[e])}var f=!(\"undefined\"===typeof window||\"undefined\"===typeof window.document||\"undefined\"===typeof window.document.createElement),d=/^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$/,p=Object.prototype.hasOwnProperty,m={},h={};function g(e,t,n,r,a,o,l){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=r,this.attributeNamespace=a,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=o,this.removeEmptyString=l}var y={};\"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style\".split(\" \").forEach((function(e){y[e]=new g(e,0,!1,e,null,!1,!1)})),[[\"acceptCharset\",\"accept-charset\"],[\"className\",\"class\"],[\"htmlFor\",\"for\"],[\"httpEquiv\",\"http-equiv\"]].forEach((function(e){var t=e[0];y[t]=new g(t,1,!1,e[1],null,!1,!1)})),[\"contentEditable\",\"draggable\",\"spellCheck\",\"value\"].forEach((function(e){y[e]=new g(e,2,!1,e.toLowerCase(),null,!1,!1)})),[\"autoReverse\",\"externalResourcesRequired\",\"focusable\",\"preserveAlpha\"].forEach((function(e){y[e]=new g(e,2,!1,e,null,!1,!1)})),\"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope\".split(\" \").forEach((function(e){y[e]=new g(e,3,!1,e.toLowerCase(),null,!1,!1)})),[\"checked\",\"multiple\",\"muted\",\"selected\"].forEach((function(e){y[e]=new g(e,3,!0,e,null,!1,!1)})),[\"capture\",\"download\"].forEach((function(e){y[e]=new g(e,4,!1,e,null,!1,!1)})),[\"cols\",\"rows\",\"size\",\"span\"].forEach((function(e){y[e]=new g(e,6,!1,e,null,!1,!1)})),[\"rowSpan\",\"start\"].forEach((function(e){y[e]=new g(e,5,!1,e.toLowerCase(),null,!1,!1)}));var v=/[\\-:]([a-z])/g;function b(e){return e[1].toUpperCase()}function w(e,t,n,r){var a=y.hasOwnProperty(t)?y[t]:null;(null!==a?0===a.type:!r&&(2<t.length&&(\"o\"===t[0]||\"O\"===t[0])&&(\"n\"===t[1]||\"N\"===t[1])))||(function(e,t,n,r){if(null===t||\"undefined\"===typeof t||function(e,t,n,r){if(null!==n&&0===n.type)return!1;switch(typeof t){case\"function\":case\"symbol\":return!0;case\"boolean\":return!r&&(null!==n?!n.acceptsBooleans:\"data-\"!==(e=e.toLowerCase().slice(0,5))&&\"aria-\"!==e);default:return!1}}(e,t,n,r))return!0;if(r)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,a,r)&&(n=null),r||null===a?function(e){return!!p.call(h,e)||!p.call(m,e)&&(d.test(e)?h[e]=!0:(m[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,\"\"+n)):a.mustUseProperty?e[a.propertyName]=null===n?3!==a.type&&\"\":n:(t=a.attributeName,r=a.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(a=a.type)||4===a&&!0===n?\"\":\"\"+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}\"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height\".split(\" \").forEach((function(e){var t=e.replace(v,b);y[t]=new g(t,1,!1,e,null,!1,!1)})),\"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type\".split(\" \").forEach((function(e){var t=e.replace(v,b);y[t]=new g(t,1,!1,e,\"http://www.w3.org/1999/xlink\",!1,!1)})),[\"xml:base\",\"xml:lang\",\"xml:space\"].forEach((function(e){var t=e.replace(v,b);y[t]=new g(t,1,!1,e,\"http://www.w3.org/XML/1998/namespace\",!1,!1)})),[\"tabIndex\",\"crossOrigin\"].forEach((function(e){y[e]=new g(e,1,!1,e.toLowerCase(),null,!1,!1)})),y.xlinkHref=new g(\"xlinkHref\",1,!1,\"xlink:href\",\"http://www.w3.org/1999/xlink\",!0,!1),[\"src\",\"href\",\"action\",\"formAction\"].forEach((function(e){y[e]=new g(e,1,!1,e.toLowerCase(),null,!0,!0)}));var k=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,x=60103,S=60106,_=60107,E=60108,C=60114,N=60109,T=60110,z=60112,P=60113,L=60120,R=60115,O=60116,j=60121,M=60128,I=60129,F=60130,D=60131;if(\"function\"===typeof Symbol&&Symbol.for){var A=Symbol.for;x=A(\"react.element\"),S=A(\"react.portal\"),_=A(\"react.fragment\"),E=A(\"react.strict_mode\"),C=A(\"react.profiler\"),N=A(\"react.provider\"),T=A(\"react.context\"),z=A(\"react.forward_ref\"),P=A(\"react.suspense\"),L=A(\"react.suspense_list\"),R=A(\"react.memo\"),O=A(\"react.lazy\"),j=A(\"react.block\"),A(\"react.scope\"),M=A(\"react.opaque.id\"),I=A(\"react.debug_trace_mode\"),F=A(\"react.offscreen\"),D=A(\"react.legacy_hidden\")}var U,B=\"function\"===typeof Symbol&&Symbol.iterator;function H(e){return null===e||\"object\"!==typeof e?null:\"function\"===typeof(e=B&&e[B]||e[\"@@iterator\"])?e:null}function V(e){if(void 0===U)try{throw Error()}catch(n){var t=n.stack.trim().match(/\\n( *(at )?)/);U=t&&t[1]||\"\"}return\"\\n\"+U+e}var W=!1;function $(e,t){if(!e||W)return\"\";W=!0;var n=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{if(t)if(t=function(){throw Error()},Object.defineProperty(t.prototype,\"props\",{set:function(){throw Error()}}),\"object\"===typeof Reflect&&Reflect.construct){try{Reflect.construct(t,[])}catch(u){var r=u}Reflect.construct(e,[],t)}else{try{t.call()}catch(u){r=u}e.call(t.prototype)}else{try{throw Error()}catch(u){r=u}e()}}catch(u){if(u&&r&&\"string\"===typeof u.stack){for(var a=u.stack.split(\"\\n\"),o=r.stack.split(\"\\n\"),l=a.length-1,i=o.length-1;1<=l&&0<=i&&a[l]!==o[i];)i--;for(;1<=l&&0<=i;l--,i--)if(a[l]!==o[i]){if(1!==l||1!==i)do{if(l--,0>--i||a[l]!==o[i])return\"\\n\"+a[l].replace(\" at new \",\" at \")}while(1<=l&&0<=i);break}}}finally{W=!1,Error.prepareStackTrace=n}return(e=e?e.displayName||e.name:\"\")?V(e):\"\"}function Q(e){switch(e.tag){case 5:return V(e.type);case 16:return V(\"Lazy\");case 13:return V(\"Suspense\");case 19:return V(\"SuspenseList\");case 0:case 2:case 15:return e=$(e.type,!1);case 11:return e=$(e.type.render,!1);case 22:return e=$(e.type._render,!1);case 1:return e=$(e.type,!0);default:return\"\"}}function q(e){if(null==e)return null;if(\"function\"===typeof e)return e.displayName||e.name||null;if(\"string\"===typeof e)return e;switch(e){case _:return\"Fragment\";case S:return\"Portal\";case C:return\"Profiler\";case E:return\"StrictMode\";case P:return\"Suspense\";case L:return\"SuspenseList\"}if(\"object\"===typeof e)switch(e.$$typeof){case T:return(e.displayName||\"Context\")+\".Consumer\";case N:return(e._context.displayName||\"Context\")+\".Provider\";case z:var t=e.render;return t=t.displayName||t.name||\"\",e.displayName||(\"\"!==t?\"ForwardRef(\"+t+\")\":\"ForwardRef\");case R:return q(e.type);case j:return q(e._render);case O:t=e._payload,e=e._init;try{return q(e(t))}catch(n){}}return null}function K(e){switch(typeof e){case\"boolean\":case\"number\":case\"object\":case\"string\":case\"undefined\":return e;default:return\"\"}}function G(e){var t=e.type;return(e=e.nodeName)&&\"input\"===e.toLowerCase()&&(\"checkbox\"===t||\"radio\"===t)}function Y(e){e._valueTracker||(e._valueTracker=function(e){var t=G(e)?\"checked\":\"value\",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=\"\"+e[t];if(!e.hasOwnProperty(t)&&\"undefined\"!==typeof n&&\"function\"===typeof n.get&&\"function\"===typeof n.set){var a=n.get,o=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return a.call(this)},set:function(e){r=\"\"+e,o.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=\"\"+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function X(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r=\"\";return e&&(r=G(e)?e.checked?\"true\":\"false\":e.value),(e=r)!==n&&(t.setValue(e),!0)}function Z(e){if(\"undefined\"===typeof(e=e||(\"undefined\"!==typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function J(e,t){var n=t.checked;return a({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function ee(e,t){var n=null==t.defaultValue?\"\":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=K(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:\"checkbox\"===t.type||\"radio\"===t.type?null!=t.checked:null!=t.value}}function te(e,t){null!=(t=t.checked)&&w(e,\"checked\",t,!1)}function ne(e,t){te(e,t);var n=K(t.value),r=t.type;if(null!=n)\"number\"===r?(0===n&&\"\"===e.value||e.value!=n)&&(e.value=\"\"+n):e.value!==\"\"+n&&(e.value=\"\"+n);else if(\"submit\"===r||\"reset\"===r)return void e.removeAttribute(\"value\");t.hasOwnProperty(\"value\")?ae(e,t.type,n):t.hasOwnProperty(\"defaultValue\")&&ae(e,t.type,K(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function re(e,t,n){if(t.hasOwnProperty(\"value\")||t.hasOwnProperty(\"defaultValue\")){var r=t.type;if(!(\"submit\"!==r&&\"reset\"!==r||void 0!==t.value&&null!==t.value))return;t=\"\"+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}\"\"!==(n=e.name)&&(e.name=\"\"),e.defaultChecked=!!e._wrapperState.initialChecked,\"\"!==n&&(e.name=n)}function ae(e,t,n){\"number\"===t&&Z(e.ownerDocument)===e||(null==n?e.defaultValue=\"\"+e._wrapperState.initialValue:e.defaultValue!==\"\"+n&&(e.defaultValue=\"\"+n))}function oe(e,t){return e=a({children:void 0},t),(t=function(e){var t=\"\";return r.Children.forEach(e,(function(e){null!=e&&(t+=e)})),t}(t.children))&&(e.children=t),e}function le(e,t,n,r){if(e=e.options,t){t={};for(var a=0;a<n.length;a++)t[\"$\"+n[a]]=!0;for(n=0;n<e.length;n++)a=t.hasOwnProperty(\"$\"+e[n].value),e[n].selected!==a&&(e[n].selected=a),a&&r&&(e[n].defaultSelected=!0)}else{for(n=\"\"+K(n),t=null,a=0;a<e.length;a++){if(e[a].value===n)return e[a].selected=!0,void(r&&(e[a].defaultSelected=!0));null!==t||e[a].disabled||(t=e[a])}null!==t&&(t.selected=!0)}}function ie(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(l(91));return a({},t,{value:void 0,defaultValue:void 0,children:\"\"+e._wrapperState.initialValue})}function ue(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(l(92));if(Array.isArray(n)){if(!(1>=n.length))throw Error(l(93));n=n[0]}t=n}null==t&&(t=\"\"),n=t}e._wrapperState={initialValue:K(n)}}function ce(e,t){var n=K(t.value),r=K(t.defaultValue);null!=n&&((n=\"\"+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=r&&(e.defaultValue=\"\"+r)}function se(e){var t=e.textContent;t===e._wrapperState.initialValue&&\"\"!==t&&null!==t&&(e.value=t)}var fe=\"http://www.w3.org/1999/xhtml\",de=\"http://www.w3.org/2000/svg\";function pe(e){switch(e){case\"svg\":return\"http://www.w3.org/2000/svg\";case\"math\":return\"http://www.w3.org/1998/Math/MathML\";default:return\"http://www.w3.org/1999/xhtml\"}}function me(e,t){return null==e||\"http://www.w3.org/1999/xhtml\"===e?pe(t):\"http://www.w3.org/2000/svg\"===e&&\"foreignObject\"===t?\"http://www.w3.org/1999/xhtml\":e}var he,ge,ye=(ge=function(e,t){if(e.namespaceURI!==de||\"innerHTML\"in e)e.innerHTML=t;else{for((he=he||document.createElement(\"div\")).innerHTML=\"<svg>\"+t.valueOf().toString()+\"</svg>\",t=he.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},\"undefined\"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,r){MSApp.execUnsafeLocalFunction((function(){return ge(e,t)}))}:ge);function ve(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}var be={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},we=[\"Webkit\",\"ms\",\"Moz\",\"O\"];function ke(e,t,n){return null==t||\"boolean\"===typeof t||\"\"===t?\"\":n||\"number\"!==typeof t||0===t||be.hasOwnProperty(e)&&be[e]?(\"\"+t).trim():t+\"px\"}function xe(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var r=0===n.indexOf(\"--\"),a=ke(n,t[n],r);\"float\"===n&&(n=\"cssFloat\"),r?e.setProperty(n,a):e[n]=a}}Object.keys(be).forEach((function(e){we.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),be[t]=be[e]}))}));var Se=a({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function _e(e,t){if(t){if(Se[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(l(137,e));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(l(60));if(\"object\"!==typeof t.dangerouslySetInnerHTML||!(\"__html\"in t.dangerouslySetInnerHTML))throw Error(l(61))}if(null!=t.style&&\"object\"!==typeof t.style)throw Error(l(62))}}function Ee(e,t){if(-1===e.indexOf(\"-\"))return\"string\"===typeof t.is;switch(e){case\"annotation-xml\":case\"color-profile\":case\"font-face\":case\"font-face-src\":case\"font-face-uri\":case\"font-face-format\":case\"font-face-name\":case\"missing-glyph\":return!1;default:return!0}}function Ce(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}var Ne=null,Te=null,ze=null;function Pe(e){if(e=ra(e)){if(\"function\"!==typeof Ne)throw Error(l(280));var t=e.stateNode;t&&(t=oa(t),Ne(e.stateNode,e.type,t))}}function Le(e){Te?ze?ze.push(e):ze=[e]:Te=e}function Re(){if(Te){var e=Te,t=ze;if(ze=Te=null,Pe(e),t)for(e=0;e<t.length;e++)Pe(t[e])}}function Oe(e,t){return e(t)}function je(e,t,n,r,a){return e(t,n,r,a)}function Me(){}var Ie=Oe,Fe=!1,De=!1;function Ae(){null===Te&&null===ze||(Me(),Re())}function Ue(e,t){var n=e.stateNode;if(null===n)return null;var r=oa(n);if(null===r)return null;n=r[t];e:switch(t){case\"onClick\":case\"onClickCapture\":case\"onDoubleClick\":case\"onDoubleClickCapture\":case\"onMouseDown\":case\"onMouseDownCapture\":case\"onMouseMove\":case\"onMouseMoveCapture\":case\"onMouseUp\":case\"onMouseUpCapture\":case\"onMouseEnter\":(r=!r.disabled)||(r=!(\"button\"===(e=e.type)||\"input\"===e||\"select\"===e||\"textarea\"===e)),e=!r;break e;default:e=!1}if(e)return null;if(n&&\"function\"!==typeof n)throw Error(l(231,t,typeof n));return n}var Be=!1;if(f)try{var He={};Object.defineProperty(He,\"passive\",{get:function(){Be=!0}}),window.addEventListener(\"test\",He,He),window.removeEventListener(\"test\",He,He)}catch(ge){Be=!1}function Ve(e,t,n,r,a,o,l,i,u){var c=Array.prototype.slice.call(arguments,3);try{t.apply(n,c)}catch(s){this.onError(s)}}var We=!1,$e=null,Qe=!1,qe=null,Ke={onError:function(e){We=!0,$e=e}};function Ge(e,t,n,r,a,o,l,i,u){We=!1,$e=null,Ve.apply(Ke,arguments)}function Ye(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!==(1026&(t=e).flags)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function Xe(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function Ze(e){if(Ye(e)!==e)throw Error(l(188))}function Je(e){if(e=function(e){var t=e.alternate;if(!t){if(null===(t=Ye(e)))throw Error(l(188));return t!==e?null:e}for(var n=e,r=t;;){var a=n.return;if(null===a)break;var o=a.alternate;if(null===o){if(null!==(r=a.return)){n=r;continue}break}if(a.child===o.child){for(o=a.child;o;){if(o===n)return Ze(a),e;if(o===r)return Ze(a),t;o=o.sibling}throw Error(l(188))}if(n.return!==r.return)n=a,r=o;else{for(var i=!1,u=a.child;u;){if(u===n){i=!0,n=a,r=o;break}if(u===r){i=!0,r=a,n=o;break}u=u.sibling}if(!i){for(u=o.child;u;){if(u===n){i=!0,n=o,r=a;break}if(u===r){i=!0,r=o,n=a;break}u=u.sibling}if(!i)throw Error(l(189))}}if(n.alternate!==r)throw Error(l(190))}if(3!==n.tag)throw Error(l(188));return n.stateNode.current===n?e:t}(e),!e)return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function et(e,t){for(var n=e.alternate;null!==t;){if(t===e||t===n)return!0;t=t.return}return!1}var tt,nt,rt,at,ot=!1,lt=[],it=null,ut=null,ct=null,st=new Map,ft=new Map,dt=[],pt=\"mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput copy cut paste click change contextmenu reset submit\".split(\" \");function mt(e,t,n,r,a){return{blockedOn:e,domEventName:t,eventSystemFlags:16|n,nativeEvent:a,targetContainers:[r]}}function ht(e,t){switch(e){case\"focusin\":case\"focusout\":it=null;break;case\"dragenter\":case\"dragleave\":ut=null;break;case\"mouseover\":case\"mouseout\":ct=null;break;case\"pointerover\":case\"pointerout\":st.delete(t.pointerId);break;case\"gotpointercapture\":case\"lostpointercapture\":ft.delete(t.pointerId)}}function gt(e,t,n,r,a,o){return null===e||e.nativeEvent!==o?(e=mt(t,n,r,a,o),null!==t&&(null!==(t=ra(t))&&nt(t)),e):(e.eventSystemFlags|=r,t=e.targetContainers,null!==a&&-1===t.indexOf(a)&&t.push(a),e)}function yt(e){var t=na(e.target);if(null!==t){var n=Ye(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=Xe(n)))return e.blockedOn=t,void at(e.lanePriority,(function(){o.unstable_runWithPriority(e.priority,(function(){rt(n)}))}))}else if(3===t&&n.stateNode.hydrate)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function vt(e){if(null!==e.blockedOn)return!1;for(var t=e.targetContainers;0<t.length;){var n=Jt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n)return null!==(t=ra(n))&&nt(t),e.blockedOn=n,!1;t.shift()}return!0}function bt(e,t,n){vt(e)&&n.delete(t)}function wt(){for(ot=!1;0<lt.length;){var e=lt[0];if(null!==e.blockedOn){null!==(e=ra(e.blockedOn))&&tt(e);break}for(var t=e.targetContainers;0<t.length;){var n=Jt(e.domEventName,e.eventSystemFlags,t[0],e.nativeEvent);if(null!==n){e.blockedOn=n;break}t.shift()}null===e.blockedOn&&lt.shift()}null!==it&&vt(it)&&(it=null),null!==ut&&vt(ut)&&(ut=null),null!==ct&&vt(ct)&&(ct=null),st.forEach(bt),ft.forEach(bt)}function kt(e,t){e.blockedOn===t&&(e.blockedOn=null,ot||(ot=!0,o.unstable_scheduleCallback(o.unstable_NormalPriority,wt)))}function xt(e){function t(t){return kt(t,e)}if(0<lt.length){kt(lt[0],e);for(var n=1;n<lt.length;n++){var r=lt[n];r.blockedOn===e&&(r.blockedOn=null)}}for(null!==it&&kt(it,e),null!==ut&&kt(ut,e),null!==ct&&kt(ct,e),st.forEach(t),ft.forEach(t),n=0;n<dt.length;n++)(r=dt[n]).blockedOn===e&&(r.blockedOn=null);for(;0<dt.length&&null===(n=dt[0]).blockedOn;)yt(n),null===n.blockedOn&&dt.shift()}function St(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n[\"Webkit\"+e]=\"webkit\"+t,n[\"Moz\"+e]=\"moz\"+t,n}var _t={animationend:St(\"Animation\",\"AnimationEnd\"),animationiteration:St(\"Animation\",\"AnimationIteration\"),animationstart:St(\"Animation\",\"AnimationStart\"),transitionend:St(\"Transition\",\"TransitionEnd\")},Et={},Ct={};function Nt(e){if(Et[e])return Et[e];if(!_t[e])return e;var t,n=_t[e];for(t in n)if(n.hasOwnProperty(t)&&t in Ct)return Et[e]=n[t];return e}f&&(Ct=document.createElement(\"div\").style,\"AnimationEvent\"in window||(delete _t.animationend.animation,delete _t.animationiteration.animation,delete _t.animationstart.animation),\"TransitionEvent\"in window||delete _t.transitionend.transition);var Tt=Nt(\"animationend\"),zt=Nt(\"animationiteration\"),Pt=Nt(\"animationstart\"),Lt=Nt(\"transitionend\"),Rt=new Map,Ot=new Map,jt=[\"abort\",\"abort\",Tt,\"animationEnd\",zt,\"animationIteration\",Pt,\"animationStart\",\"canplay\",\"canPlay\",\"canplaythrough\",\"canPlayThrough\",\"durationchange\",\"durationChange\",\"emptied\",\"emptied\",\"encrypted\",\"encrypted\",\"ended\",\"ended\",\"error\",\"error\",\"gotpointercapture\",\"gotPointerCapture\",\"load\",\"load\",\"loadeddata\",\"loadedData\",\"loadedmetadata\",\"loadedMetadata\",\"loadstart\",\"loadStart\",\"lostpointercapture\",\"lostPointerCapture\",\"playing\",\"playing\",\"progress\",\"progress\",\"seeking\",\"seeking\",\"stalled\",\"stalled\",\"suspend\",\"suspend\",\"timeupdate\",\"timeUpdate\",Lt,\"transitionEnd\",\"waiting\",\"waiting\"];function Mt(e,t){for(var n=0;n<e.length;n+=2){var r=e[n],a=e[n+1];a=\"on\"+(a[0].toUpperCase()+a.slice(1)),Ot.set(r,t),Rt.set(r,a),c(a,[r])}}(0,o.unstable_now)();var It=8;function Ft(e){if(0!==(1&e))return It=15,1;if(0!==(2&e))return It=14,2;if(0!==(4&e))return It=13,4;var t=24&e;return 0!==t?(It=12,t):0!==(32&e)?(It=11,32):0!==(t=192&e)?(It=10,t):0!==(256&e)?(It=9,256):0!==(t=3584&e)?(It=8,t):0!==(4096&e)?(It=7,4096):0!==(t=4186112&e)?(It=6,t):0!==(t=62914560&e)?(It=5,t):67108864&e?(It=4,67108864):0!==(134217728&e)?(It=3,134217728):0!==(t=805306368&e)?(It=2,t):0!==(1073741824&e)?(It=1,1073741824):(It=8,e)}function Dt(e,t){var n=e.pendingLanes;if(0===n)return It=0;var r=0,a=0,o=e.expiredLanes,l=e.suspendedLanes,i=e.pingedLanes;if(0!==o)r=o,a=It=15;else if(0!==(o=134217727&n)){var u=o&~l;0!==u?(r=Ft(u),a=It):0!==(i&=o)&&(r=Ft(i),a=It)}else 0!==(o=n&~l)?(r=Ft(o),a=It):0!==i&&(r=Ft(i),a=It);if(0===r)return 0;if(r=n&((0>(r=31-Wt(r))?0:1<<r)<<1)-1,0!==t&&t!==r&&0===(t&l)){if(Ft(t),a<=It)return t;It=a}if(0!==(t=e.entangledLanes))for(e=e.entanglements,t&=r;0<t;)a=1<<(n=31-Wt(t)),r|=e[n],t&=~a;return r}function At(e){return 0!==(e=-1073741825&e.pendingLanes)?e:1073741824&e?1073741824:0}function Ut(e,t){switch(e){case 15:return 1;case 14:return 2;case 12:return 0===(e=Bt(24&~t))?Ut(10,t):e;case 10:return 0===(e=Bt(192&~t))?Ut(8,t):e;case 8:return 0===(e=Bt(3584&~t))&&(0===(e=Bt(4186112&~t))&&(e=512)),e;case 2:return 0===(t=Bt(805306368&~t))&&(t=268435456),t}throw Error(l(358,e))}function Bt(e){return e&-e}function Ht(e){for(var t=[],n=0;31>n;n++)t.push(e);return t}function Vt(e,t,n){e.pendingLanes|=t;var r=t-1;e.suspendedLanes&=r,e.pingedLanes&=r,(e=e.eventTimes)[t=31-Wt(t)]=n}var Wt=Math.clz32?Math.clz32:function(e){return 0===e?32:31-($t(e)/Qt|0)|0},$t=Math.log,Qt=Math.LN2;var qt=o.unstable_UserBlockingPriority,Kt=o.unstable_runWithPriority,Gt=!0;function Yt(e,t,n,r){Fe||Me();var a=Zt,o=Fe;Fe=!0;try{je(a,e,t,n,r)}finally{(Fe=o)||Ae()}}function Xt(e,t,n,r){Kt(qt,Zt.bind(null,e,t,n,r))}function Zt(e,t,n,r){var a;if(Gt)if((a=0===(4&t))&&0<lt.length&&-1<pt.indexOf(e))e=mt(null,e,t,n,r),lt.push(e);else{var o=Jt(e,t,n,r);if(null===o)a&&ht(e,r);else{if(a){if(-1<pt.indexOf(e))return e=mt(o,e,t,n,r),void lt.push(e);if(function(e,t,n,r,a){switch(t){case\"focusin\":return it=gt(it,e,t,n,r,a),!0;case\"dragenter\":return ut=gt(ut,e,t,n,r,a),!0;case\"mouseover\":return ct=gt(ct,e,t,n,r,a),!0;case\"pointerover\":var o=a.pointerId;return st.set(o,gt(st.get(o)||null,e,t,n,r,a)),!0;case\"gotpointercapture\":return o=a.pointerId,ft.set(o,gt(ft.get(o)||null,e,t,n,r,a)),!0}return!1}(o,e,t,n,r))return;ht(e,r)}Mr(e,t,r,null,n)}}}function Jt(e,t,n,r){var a=Ce(r);if(null!==(a=na(a))){var o=Ye(a);if(null===o)a=null;else{var l=o.tag;if(13===l){if(null!==(a=Xe(o)))return a;a=null}else if(3===l){if(o.stateNode.hydrate)return 3===o.tag?o.stateNode.containerInfo:null;a=null}else o!==a&&(a=null)}}return Mr(e,t,r,a,n),null}var en=null,tn=null,nn=null;function rn(){if(nn)return nn;var e,t,n=tn,r=n.length,a=\"value\"in en?en.value:en.textContent,o=a.length;for(e=0;e<r&&n[e]===a[e];e++);var l=r-e;for(t=1;t<=l&&n[r-t]===a[o-t];t++);return nn=a.slice(e,1<t?1-t:void 0)}function an(e){var t=e.keyCode;return\"charCode\"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}function on(){return!0}function ln(){return!1}function un(e){function t(t,n,r,a,o){for(var l in this._reactName=t,this._targetInst=r,this.type=n,this.nativeEvent=a,this.target=o,this.currentTarget=null,e)e.hasOwnProperty(l)&&(t=e[l],this[l]=t?t(a):a[l]);return this.isDefaultPrevented=(null!=a.defaultPrevented?a.defaultPrevented:!1===a.returnValue)?on:ln,this.isPropagationStopped=ln,this}return a(t.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():\"unknown\"!==typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=on)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():\"unknown\"!==typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=on)},persist:function(){},isPersistent:on}),t}var cn,sn,fn,dn={eventPhase:0,bubbles:0,cancelable:0,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:0,isTrusted:0},pn=un(dn),mn=a({},dn,{view:0,detail:0}),hn=un(mn),gn=a({},mn,{screenX:0,screenY:0,clientX:0,clientY:0,pageX:0,pageY:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,getModifierState:Tn,button:0,buttons:0,relatedTarget:function(e){return void 0===e.relatedTarget?e.fromElement===e.srcElement?e.toElement:e.fromElement:e.relatedTarget},movementX:function(e){return\"movementX\"in e?e.movementX:(e!==fn&&(fn&&\"mousemove\"===e.type?(cn=e.screenX-fn.screenX,sn=e.screenY-fn.screenY):sn=cn=0,fn=e),cn)},movementY:function(e){return\"movementY\"in e?e.movementY:sn}}),yn=un(gn),vn=un(a({},gn,{dataTransfer:0})),bn=un(a({},mn,{relatedTarget:0})),wn=un(a({},dn,{animationName:0,elapsedTime:0,pseudoElement:0})),kn=a({},dn,{clipboardData:function(e){return\"clipboardData\"in e?e.clipboardData:window.clipboardData}}),xn=un(kn),Sn=un(a({},dn,{data:0})),_n={Esc:\"Escape\",Spacebar:\" \",Left:\"ArrowLeft\",Up:\"ArrowUp\",Right:\"ArrowRight\",Down:\"ArrowDown\",Del:\"Delete\",Win:\"OS\",Menu:\"ContextMenu\",Apps:\"ContextMenu\",Scroll:\"ScrollLock\",MozPrintableKey:\"Unidentified\"},En={8:\"Backspace\",9:\"Tab\",12:\"Clear\",13:\"Enter\",16:\"Shift\",17:\"Control\",18:\"Alt\",19:\"Pause\",20:\"CapsLock\",27:\"Escape\",32:\" \",33:\"PageUp\",34:\"PageDown\",35:\"End\",36:\"Home\",37:\"ArrowLeft\",38:\"ArrowUp\",39:\"ArrowRight\",40:\"ArrowDown\",45:\"Insert\",46:\"Delete\",112:\"F1\",113:\"F2\",114:\"F3\",115:\"F4\",116:\"F5\",117:\"F6\",118:\"F7\",119:\"F8\",120:\"F9\",121:\"F10\",122:\"F11\",123:\"F12\",144:\"NumLock\",145:\"ScrollLock\",224:\"Meta\"},Cn={Alt:\"altKey\",Control:\"ctrlKey\",Meta:\"metaKey\",Shift:\"shiftKey\"};function Nn(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Cn[e])&&!!t[e]}function Tn(){return Nn}var zn=a({},mn,{key:function(e){if(e.key){var t=_n[e.key]||e.key;if(\"Unidentified\"!==t)return t}return\"keypress\"===e.type?13===(e=an(e))?\"Enter\":String.fromCharCode(e):\"keydown\"===e.type||\"keyup\"===e.type?En[e.keyCode]||\"Unidentified\":\"\"},code:0,location:0,ctrlKey:0,shiftKey:0,altKey:0,metaKey:0,repeat:0,locale:0,getModifierState:Tn,charCode:function(e){return\"keypress\"===e.type?an(e):0},keyCode:function(e){return\"keydown\"===e.type||\"keyup\"===e.type?e.keyCode:0},which:function(e){return\"keypress\"===e.type?an(e):\"keydown\"===e.type||\"keyup\"===e.type?e.keyCode:0}}),Pn=un(zn),Ln=un(a({},gn,{pointerId:0,width:0,height:0,pressure:0,tangentialPressure:0,tiltX:0,tiltY:0,twist:0,pointerType:0,isPrimary:0})),Rn=un(a({},mn,{touches:0,targetTouches:0,changedTouches:0,altKey:0,metaKey:0,ctrlKey:0,shiftKey:0,getModifierState:Tn})),On=un(a({},dn,{propertyName:0,elapsedTime:0,pseudoElement:0})),jn=a({},gn,{deltaX:function(e){return\"deltaX\"in e?e.deltaX:\"wheelDeltaX\"in e?-e.wheelDeltaX:0},deltaY:function(e){return\"deltaY\"in e?e.deltaY:\"wheelDeltaY\"in e?-e.wheelDeltaY:\"wheelDelta\"in e?-e.wheelDelta:0},deltaZ:0,deltaMode:0}),Mn=un(jn),In=[9,13,27,32],Fn=f&&\"CompositionEvent\"in window,Dn=null;f&&\"documentMode\"in document&&(Dn=document.documentMode);var An=f&&\"TextEvent\"in window&&!Dn,Un=f&&(!Fn||Dn&&8<Dn&&11>=Dn),Bn=String.fromCharCode(32),Hn=!1;function Vn(e,t){switch(e){case\"keyup\":return-1!==In.indexOf(t.keyCode);case\"keydown\":return 229!==t.keyCode;case\"keypress\":case\"mousedown\":case\"focusout\":return!0;default:return!1}}function Wn(e){return\"object\"===typeof(e=e.detail)&&\"data\"in e?e.data:null}var $n=!1;var Qn={color:!0,date:!0,datetime:!0,\"datetime-local\":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function qn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return\"input\"===t?!!Qn[e.type]:\"textarea\"===t}function Kn(e,t,n,r){Le(r),0<(t=Fr(t,\"onChange\")).length&&(n=new pn(\"onChange\",\"change\",null,n,r),e.push({event:n,listeners:t}))}var Gn=null,Yn=null;function Xn(e){zr(e,0)}function Zn(e){if(X(aa(e)))return e}function Jn(e,t){if(\"change\"===e)return t}var er=!1;if(f){var tr;if(f){var nr=\"oninput\"in document;if(!nr){var rr=document.createElement(\"div\");rr.setAttribute(\"oninput\",\"return;\"),nr=\"function\"===typeof rr.oninput}tr=nr}else tr=!1;er=tr&&(!document.documentMode||9<document.documentMode)}function ar(){Gn&&(Gn.detachEvent(\"onpropertychange\",or),Yn=Gn=null)}function or(e){if(\"value\"===e.propertyName&&Zn(Yn)){var t=[];if(Kn(t,Yn,e,Ce(e)),e=Xn,Fe)e(t);else{Fe=!0;try{Oe(e,t)}finally{Fe=!1,Ae()}}}}function lr(e,t,n){\"focusin\"===e?(ar(),Yn=n,(Gn=t).attachEvent(\"onpropertychange\",or)):\"focusout\"===e&&ar()}function ir(e){if(\"selectionchange\"===e||\"keyup\"===e||\"keydown\"===e)return Zn(Yn)}function ur(e,t){if(\"click\"===e)return Zn(t)}function cr(e,t){if(\"input\"===e||\"change\"===e)return Zn(t)}var sr=\"function\"===typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e===1/t)||e!==e&&t!==t},fr=Object.prototype.hasOwnProperty;function dr(e,t){if(sr(e,t))return!0;if(\"object\"!==typeof e||null===e||\"object\"!==typeof t||null===t)return!1;var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(r=0;r<n.length;r++)if(!fr.call(t,n[r])||!sr(e[n[r]],t[n[r]]))return!1;return!0}function pr(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function mr(e,t){var n,r=pr(e);for(e=0;r;){if(3===r.nodeType){if(n=e+r.textContent.length,e<=t&&n>=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=pr(r)}}function hr(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?hr(e,t.parentNode):\"contains\"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function gr(){for(var e=window,t=Z();t instanceof e.HTMLIFrameElement;){try{var n=\"string\"===typeof t.contentWindow.location.href}catch(r){n=!1}if(!n)break;t=Z((e=t.contentWindow).document)}return t}function yr(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&(\"input\"===t&&(\"text\"===e.type||\"search\"===e.type||\"tel\"===e.type||\"url\"===e.type||\"password\"===e.type)||\"textarea\"===t||\"true\"===e.contentEditable)}var vr=f&&\"documentMode\"in document&&11>=document.documentMode,br=null,wr=null,kr=null,xr=!1;function Sr(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;xr||null==br||br!==Z(r)||(\"selectionStart\"in(r=br)&&yr(r)?r={start:r.selectionStart,end:r.selectionEnd}:r={anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},kr&&dr(kr,r)||(kr=r,0<(r=Fr(wr,\"onSelect\")).length&&(t=new pn(\"onSelect\",\"select\",null,t,n),e.push({event:t,listeners:r}),t.target=br)))}Mt(\"cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focusin focus focusout blur input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange\".split(\" \"),0),Mt(\"drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel\".split(\" \"),1),Mt(jt,2);for(var _r=\"change selectionchange textInput compositionstart compositionend compositionupdate\".split(\" \"),Er=0;Er<_r.length;Er++)Ot.set(_r[Er],0);s(\"onMouseEnter\",[\"mouseout\",\"mouseover\"]),s(\"onMouseLeave\",[\"mouseout\",\"mouseover\"]),s(\"onPointerEnter\",[\"pointerout\",\"pointerover\"]),s(\"onPointerLeave\",[\"pointerout\",\"pointerover\"]),c(\"onChange\",\"change click focusin focusout input keydown keyup selectionchange\".split(\" \")),c(\"onSelect\",\"focusout contextmenu dragend focusin keydown keyup mousedown mouseup selectionchange\".split(\" \")),c(\"onBeforeInput\",[\"compositionend\",\"keypress\",\"textInput\",\"paste\"]),c(\"onCompositionEnd\",\"compositionend focusout keydown keypress keyup mousedown\".split(\" \")),c(\"onCompositionStart\",\"compositionstart focusout keydown keypress keyup mousedown\".split(\" \")),c(\"onCompositionUpdate\",\"compositionupdate focusout keydown keypress keyup mousedown\".split(\" \"));var Cr=\"abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting\".split(\" \"),Nr=new Set(\"cancel close invalid load scroll toggle\".split(\" \").concat(Cr));function Tr(e,t,n){var r=e.type||\"unknown-event\";e.currentTarget=n,function(e,t,n,r,a,o,i,u,c){if(Ge.apply(this,arguments),We){if(!We)throw Error(l(198));var s=$e;We=!1,$e=null,Qe||(Qe=!0,qe=s)}}(r,t,void 0,e),e.currentTarget=null}function zr(e,t){t=0!==(4&t);for(var n=0;n<e.length;n++){var r=e[n],a=r.event;r=r.listeners;e:{var o=void 0;if(t)for(var l=r.length-1;0<=l;l--){var i=r[l],u=i.instance,c=i.currentTarget;if(i=i.listener,u!==o&&a.isPropagationStopped())break e;Tr(a,i,c),o=u}else for(l=0;l<r.length;l++){if(u=(i=r[l]).instance,c=i.currentTarget,i=i.listener,u!==o&&a.isPropagationStopped())break e;Tr(a,i,c),o=u}}}if(Qe)throw e=qe,Qe=!1,qe=null,e}function Pr(e,t){var n=la(t),r=e+\"__bubble\";n.has(r)||(jr(t,e,2,!1),n.add(r))}var Lr=\"_reactListening\"+Math.random().toString(36).slice(2);function Rr(e){e[Lr]||(e[Lr]=!0,i.forEach((function(t){Nr.has(t)||Or(t,!1,e,null),Or(t,!0,e,null)})))}function Or(e,t,n,r){var a=4<arguments.length&&void 0!==arguments[4]?arguments[4]:0,o=n;if(\"selectionchange\"===e&&9!==n.nodeType&&(o=n.ownerDocument),null!==r&&!t&&Nr.has(e)){if(\"scroll\"!==e)return;a|=2,o=r}var l=la(o),i=e+\"__\"+(t?\"capture\":\"bubble\");l.has(i)||(t&&(a|=4),jr(o,e,a,t),l.add(i))}function jr(e,t,n,r){var a=Ot.get(t);switch(void 0===a?2:a){case 0:a=Yt;break;case 1:a=Xt;break;default:a=Zt}n=a.bind(null,t,n,e),a=void 0,!Be||\"touchstart\"!==t&&\"touchmove\"!==t&&\"wheel\"!==t||(a=!0),r?void 0!==a?e.addEventListener(t,n,{capture:!0,passive:a}):e.addEventListener(t,n,!0):void 0!==a?e.addEventListener(t,n,{passive:a}):e.addEventListener(t,n,!1)}function Mr(e,t,n,r,a){var o=r;if(0===(1&t)&&0===(2&t)&&null!==r)e:for(;;){if(null===r)return;var l=r.tag;if(3===l||4===l){var i=r.stateNode.containerInfo;if(i===a||8===i.nodeType&&i.parentNode===a)break;if(4===l)for(l=r.return;null!==l;){var u=l.tag;if((3===u||4===u)&&((u=l.stateNode.containerInfo)===a||8===u.nodeType&&u.parentNode===a))return;l=l.return}for(;null!==i;){if(null===(l=na(i)))return;if(5===(u=l.tag)||6===u){r=o=l;continue e}i=i.parentNode}}r=r.return}!function(e,t,n){if(De)return e(t,n);De=!0;try{Ie(e,t,n)}finally{De=!1,Ae()}}((function(){var r=o,a=Ce(n),l=[];e:{var i=Rt.get(e);if(void 0!==i){var u=pn,c=e;switch(e){case\"keypress\":if(0===an(n))break e;case\"keydown\":case\"keyup\":u=Pn;break;case\"focusin\":c=\"focus\",u=bn;break;case\"focusout\":c=\"blur\",u=bn;break;case\"beforeblur\":case\"afterblur\":u=bn;break;case\"click\":if(2===n.button)break e;case\"auxclick\":case\"dblclick\":case\"mousedown\":case\"mousemove\":case\"mouseup\":case\"mouseout\":case\"mouseover\":case\"contextmenu\":u=yn;break;case\"drag\":case\"dragend\":case\"dragenter\":case\"dragexit\":case\"dragleave\":case\"dragover\":case\"dragstart\":case\"drop\":u=vn;break;case\"touchcancel\":case\"touchend\":case\"touchmove\":case\"touchstart\":u=Rn;break;case Tt:case zt:case Pt:u=wn;break;case Lt:u=On;break;case\"scroll\":u=hn;break;case\"wheel\":u=Mn;break;case\"copy\":case\"cut\":case\"paste\":u=xn;break;case\"gotpointercapture\":case\"lostpointercapture\":case\"pointercancel\":case\"pointerdown\":case\"pointermove\":case\"pointerout\":case\"pointerover\":case\"pointerup\":u=Ln}var s=0!==(4&t),f=!s&&\"scroll\"===e,d=s?null!==i?i+\"Capture\":null:i;s=[];for(var p,m=r;null!==m;){var h=(p=m).stateNode;if(5===p.tag&&null!==h&&(p=h,null!==d&&(null!=(h=Ue(m,d))&&s.push(Ir(m,h,p)))),f)break;m=m.return}0<s.length&&(i=new u(i,c,null,n,a),l.push({event:i,listeners:s}))}}if(0===(7&t)){if(u=\"mouseout\"===e||\"pointerout\"===e,(!(i=\"mouseover\"===e||\"pointerover\"===e)||0!==(16&t)||!(c=n.relatedTarget||n.fromElement)||!na(c)&&!c[ea])&&(u||i)&&(i=a.window===a?a:(i=a.ownerDocument)?i.defaultView||i.parentWindow:window,u?(u=r,null!==(c=(c=n.relatedTarget||n.toElement)?na(c):null)&&(c!==(f=Ye(c))||5!==c.tag&&6!==c.tag)&&(c=null)):(u=null,c=r),u!==c)){if(s=yn,h=\"onMouseLeave\",d=\"onMouseEnter\",m=\"mouse\",\"pointerout\"!==e&&\"pointerover\"!==e||(s=Ln,h=\"onPointerLeave\",d=\"onPointerEnter\",m=\"pointer\"),f=null==u?i:aa(u),p=null==c?i:aa(c),(i=new s(h,m+\"leave\",u,n,a)).target=f,i.relatedTarget=p,h=null,na(a)===r&&((s=new s(d,m+\"enter\",c,n,a)).target=p,s.relatedTarget=f,h=s),f=h,u&&c)e:{for(d=c,m=0,p=s=u;p;p=Dr(p))m++;for(p=0,h=d;h;h=Dr(h))p++;for(;0<m-p;)s=Dr(s),m--;for(;0<p-m;)d=Dr(d),p--;for(;m--;){if(s===d||null!==d&&s===d.alternate)break e;s=Dr(s),d=Dr(d)}s=null}else s=null;null!==u&&Ar(l,i,u,s,!1),null!==c&&null!==f&&Ar(l,f,c,s,!0)}if(\"select\"===(u=(i=r?aa(r):window).nodeName&&i.nodeName.toLowerCase())||\"input\"===u&&\"file\"===i.type)var g=Jn;else if(qn(i))if(er)g=cr;else{g=ir;var y=lr}else(u=i.nodeName)&&\"input\"===u.toLowerCase()&&(\"checkbox\"===i.type||\"radio\"===i.type)&&(g=ur);switch(g&&(g=g(e,r))?Kn(l,g,n,a):(y&&y(e,i,r),\"focusout\"===e&&(y=i._wrapperState)&&y.controlled&&\"number\"===i.type&&ae(i,\"number\",i.value)),y=r?aa(r):window,e){case\"focusin\":(qn(y)||\"true\"===y.contentEditable)&&(br=y,wr=r,kr=null);break;case\"focusout\":kr=wr=br=null;break;case\"mousedown\":xr=!0;break;case\"contextmenu\":case\"mouseup\":case\"dragend\":xr=!1,Sr(l,n,a);break;case\"selectionchange\":if(vr)break;case\"keydown\":case\"keyup\":Sr(l,n,a)}var v;if(Fn)e:{switch(e){case\"compositionstart\":var b=\"onCompositionStart\";break e;case\"compositionend\":b=\"onCompositionEnd\";break e;case\"compositionupdate\":b=\"onCompositionUpdate\";break e}b=void 0}else $n?Vn(e,n)&&(b=\"onCompositionEnd\"):\"keydown\"===e&&229===n.keyCode&&(b=\"onCompositionStart\");b&&(Un&&\"ko\"!==n.locale&&($n||\"onCompositionStart\"!==b?\"onCompositionEnd\"===b&&$n&&(v=rn()):(tn=\"value\"in(en=a)?en.value:en.textContent,$n=!0)),0<(y=Fr(r,b)).length&&(b=new Sn(b,e,null,n,a),l.push({event:b,listeners:y}),v?b.data=v:null!==(v=Wn(n))&&(b.data=v))),(v=An?function(e,t){switch(e){case\"compositionend\":return Wn(t);case\"keypress\":return 32!==t.which?null:(Hn=!0,Bn);case\"textInput\":return(e=t.data)===Bn&&Hn?null:e;default:return null}}(e,n):function(e,t){if($n)return\"compositionend\"===e||!Fn&&Vn(e,t)?(e=rn(),nn=tn=en=null,$n=!1,e):null;switch(e){case\"paste\":default:return null;case\"keypress\":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case\"compositionend\":return Un&&\"ko\"!==t.locale?null:t.data}}(e,n))&&(0<(r=Fr(r,\"onBeforeInput\")).length&&(a=new Sn(\"onBeforeInput\",\"beforeinput\",null,n,a),l.push({event:a,listeners:r}),a.data=v))}zr(l,t)}))}function Ir(e,t,n){return{instance:e,listener:t,currentTarget:n}}function Fr(e,t){for(var n=t+\"Capture\",r=[];null!==e;){var a=e,o=a.stateNode;5===a.tag&&null!==o&&(a=o,null!=(o=Ue(e,n))&&r.unshift(Ir(e,o,a)),null!=(o=Ue(e,t))&&r.push(Ir(e,o,a))),e=e.return}return r}function Dr(e){if(null===e)return null;do{e=e.return}while(e&&5!==e.tag);return e||null}function Ar(e,t,n,r,a){for(var o=t._reactName,l=[];null!==n&&n!==r;){var i=n,u=i.alternate,c=i.stateNode;if(null!==u&&u===r)break;5===i.tag&&null!==c&&(i=c,a?null!=(u=Ue(n,o))&&l.unshift(Ir(n,u,i)):a||null!=(u=Ue(n,o))&&l.push(Ir(n,u,i))),n=n.return}0!==l.length&&e.push({event:t,listeners:l})}function Ur(){}var Br=null,Hr=null;function Vr(e,t){switch(e){case\"button\":case\"input\":case\"select\":case\"textarea\":return!!t.autoFocus}return!1}function Wr(e,t){return\"textarea\"===e||\"option\"===e||\"noscript\"===e||\"string\"===typeof t.children||\"number\"===typeof t.children||\"object\"===typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var $r=\"function\"===typeof setTimeout?setTimeout:void 0,Qr=\"function\"===typeof clearTimeout?clearTimeout:void 0;function qr(e){1===e.nodeType?e.textContent=\"\":9===e.nodeType&&(null!=(e=e.body)&&(e.textContent=\"\"))}function Kr(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break}return e}function Gr(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if(\"$\"===n||\"$!\"===n||\"$?\"===n){if(0===t)return e;t--}else\"/$\"===n&&t++}e=e.previousSibling}return null}var Yr=0;var Xr=Math.random().toString(36).slice(2),Zr=\"__reactFiber$\"+Xr,Jr=\"__reactProps$\"+Xr,ea=\"__reactContainer$\"+Xr,ta=\"__reactEvents$\"+Xr;function na(e){var t=e[Zr];if(t)return t;for(var n=e.parentNode;n;){if(t=n[ea]||n[Zr]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=Gr(e);null!==e;){if(n=e[Zr])return n;e=Gr(e)}return t}n=(e=n).parentNode}return null}function ra(e){return!(e=e[Zr]||e[ea])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function aa(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(l(33))}function oa(e){return e[Jr]||null}function la(e){var t=e[ta];return void 0===t&&(t=e[ta]=new Set),t}var ia=[],ua=-1;function ca(e){return{current:e}}function sa(e){0>ua||(e.current=ia[ua],ia[ua]=null,ua--)}function fa(e,t){ua++,ia[ua]=e.current,e.current=t}var da={},pa=ca(da),ma=ca(!1),ha=da;function ga(e,t){var n=e.type.contextTypes;if(!n)return da;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var a,o={};for(a in n)o[a]=t[a];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=o),o}function ya(e){return null!==(e=e.childContextTypes)&&void 0!==e}function va(){sa(ma),sa(pa)}function ba(e,t,n){if(pa.current!==da)throw Error(l(168));fa(pa,t),fa(ma,n)}function wa(e,t,n){var r=e.stateNode;if(e=t.childContextTypes,\"function\"!==typeof r.getChildContext)return n;for(var o in r=r.getChildContext())if(!(o in e))throw Error(l(108,q(t)||\"Unknown\",o));return a({},n,r)}function ka(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||da,ha=pa.current,fa(pa,e),fa(ma,ma.current),!0}function xa(e,t,n){var r=e.stateNode;if(!r)throw Error(l(169));n?(e=wa(e,t,ha),r.__reactInternalMemoizedMergedChildContext=e,sa(ma),sa(pa),fa(pa,e)):sa(ma),fa(ma,n)}var Sa=null,_a=null,Ea=o.unstable_runWithPriority,Ca=o.unstable_scheduleCallback,Na=o.unstable_cancelCallback,Ta=o.unstable_shouldYield,za=o.unstable_requestPaint,Pa=o.unstable_now,La=o.unstable_getCurrentPriorityLevel,Ra=o.unstable_ImmediatePriority,Oa=o.unstable_UserBlockingPriority,ja=o.unstable_NormalPriority,Ma=o.unstable_LowPriority,Ia=o.unstable_IdlePriority,Fa={},Da=void 0!==za?za:function(){},Aa=null,Ua=null,Ba=!1,Ha=Pa(),Va=1e4>Ha?Pa:function(){return Pa()-Ha};function Wa(){switch(La()){case Ra:return 99;case Oa:return 98;case ja:return 97;case Ma:return 96;case Ia:return 95;default:throw Error(l(332))}}function $a(e){switch(e){case 99:return Ra;case 98:return Oa;case 97:return ja;case 96:return Ma;case 95:return Ia;default:throw Error(l(332))}}function Qa(e,t){return e=$a(e),Ea(e,t)}function qa(e,t,n){return e=$a(e),Ca(e,t,n)}function Ka(){if(null!==Ua){var e=Ua;Ua=null,Na(e)}Ga()}function Ga(){if(!Ba&&null!==Aa){Ba=!0;var e=0;try{var t=Aa;Qa(99,(function(){for(;e<t.length;e++){var n=t[e];do{n=n(!0)}while(null!==n)}})),Aa=null}catch(n){throw null!==Aa&&(Aa=Aa.slice(e+1)),Ca(Ra,Ka),n}finally{Ba=!1}}}var Ya=k.ReactCurrentBatchConfig;function Xa(e,t){if(e&&e.defaultProps){for(var n in t=a({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}return t}var Za=ca(null),Ja=null,eo=null,to=null;function no(){to=eo=Ja=null}function ro(e){var t=Za.current;sa(Za),e.type._context._currentValue=t}function ao(e,t){for(;null!==e;){var n=e.alternate;if((e.childLanes&t)===t){if(null===n||(n.childLanes&t)===t)break;n.childLanes|=t}else e.childLanes|=t,null!==n&&(n.childLanes|=t);e=e.return}}function oo(e,t){Ja=e,to=eo=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(0!==(e.lanes&t)&&(Fl=!0),e.firstContext=null)}function lo(e,t){if(to!==e&&!1!==t&&0!==t)if(\"number\"===typeof t&&1073741823!==t||(to=e,t=1073741823),t={context:e,observedBits:t,next:null},null===eo){if(null===Ja)throw Error(l(308));eo=t,Ja.dependencies={lanes:0,firstContext:t,responders:null}}else eo=eo.next=t;return e._currentValue}var io=!1;function uo(e){e.updateQueue={baseState:e.memoizedState,firstBaseUpdate:null,lastBaseUpdate:null,shared:{pending:null},effects:null}}function co(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,firstBaseUpdate:e.firstBaseUpdate,lastBaseUpdate:e.lastBaseUpdate,shared:e.shared,effects:e.effects})}function so(e,t){return{eventTime:e,lane:t,tag:0,payload:null,callback:null,next:null}}function fo(e,t){if(null!==(e=e.updateQueue)){var n=(e=e.shared).pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}}function po(e,t){var n=e.updateQueue,r=e.alternate;if(null!==r&&n===(r=r.updateQueue)){var a=null,o=null;if(null!==(n=n.firstBaseUpdate)){do{var l={eventTime:n.eventTime,lane:n.lane,tag:n.tag,payload:n.payload,callback:n.callback,next:null};null===o?a=o=l:o=o.next=l,n=n.next}while(null!==n);null===o?a=o=t:o=o.next=t}else a=o=t;return n={baseState:r.baseState,firstBaseUpdate:a,lastBaseUpdate:o,shared:r.shared,effects:r.effects},void(e.updateQueue=n)}null===(e=n.lastBaseUpdate)?n.firstBaseUpdate=t:e.next=t,n.lastBaseUpdate=t}function mo(e,t,n,r){var o=e.updateQueue;io=!1;var l=o.firstBaseUpdate,i=o.lastBaseUpdate,u=o.shared.pending;if(null!==u){o.shared.pending=null;var c=u,s=c.next;c.next=null,null===i?l=s:i.next=s,i=c;var f=e.alternate;if(null!==f){var d=(f=f.updateQueue).lastBaseUpdate;d!==i&&(null===d?f.firstBaseUpdate=s:d.next=s,f.lastBaseUpdate=c)}}if(null!==l){for(d=o.baseState,i=0,f=s=c=null;;){u=l.lane;var p=l.eventTime;if((r&u)===u){null!==f&&(f=f.next={eventTime:p,lane:0,tag:l.tag,payload:l.payload,callback:l.callback,next:null});e:{var m=e,h=l;switch(u=t,p=n,h.tag){case 1:if(\"function\"===typeof(m=h.payload)){d=m.call(p,d,u);break e}d=m;break e;case 3:m.flags=-4097&m.flags|64;case 0:if(null===(u=\"function\"===typeof(m=h.payload)?m.call(p,d,u):m)||void 0===u)break e;d=a({},d,u);break e;case 2:io=!0}}null!==l.callback&&(e.flags|=32,null===(u=o.effects)?o.effects=[l]:u.push(l))}else p={eventTime:p,lane:u,tag:l.tag,payload:l.payload,callback:l.callback,next:null},null===f?(s=f=p,c=d):f=f.next=p,i|=u;if(null===(l=l.next)){if(null===(u=o.shared.pending))break;l=u.next,u.next=null,o.lastBaseUpdate=u,o.shared.pending=null}}null===f&&(c=d),o.baseState=c,o.firstBaseUpdate=s,o.lastBaseUpdate=f,Bi|=i,e.lanes=i,e.memoizedState=d}}function ho(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var r=e[t],a=r.callback;if(null!==a){if(r.callback=null,r=n,\"function\"!==typeof a)throw Error(l(191,a));a.call(r)}}}var go=(new r.Component).refs;function yo(e,t,n,r){n=null===(n=n(r,t=e.memoizedState))||void 0===n?t:a({},t,n),e.memoizedState=n,0===e.lanes&&(e.updateQueue.baseState=n)}var vo={isMounted:function(e){return!!(e=e._reactInternals)&&Ye(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternals;var r=du(),a=pu(e),o=so(r,a);o.payload=t,void 0!==n&&null!==n&&(o.callback=n),fo(e,o),mu(e,a,r)},enqueueReplaceState:function(e,t,n){e=e._reactInternals;var r=du(),a=pu(e),o=so(r,a);o.tag=1,o.payload=t,void 0!==n&&null!==n&&(o.callback=n),fo(e,o),mu(e,a,r)},enqueueForceUpdate:function(e,t){e=e._reactInternals;var n=du(),r=pu(e),a=so(n,r);a.tag=2,void 0!==t&&null!==t&&(a.callback=t),fo(e,a),mu(e,r,n)}};function bo(e,t,n,r,a,o,l){return\"function\"===typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(r,o,l):!t.prototype||!t.prototype.isPureReactComponent||(!dr(n,r)||!dr(a,o))}function wo(e,t,n){var r=!1,a=da,o=t.contextType;return\"object\"===typeof o&&null!==o?o=lo(o):(a=ya(t)?ha:pa.current,o=(r=null!==(r=t.contextTypes)&&void 0!==r)?ga(e,a):da),t=new t(n,o),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=vo,e.stateNode=t,t._reactInternals=e,r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=a,e.__reactInternalMemoizedMaskedChildContext=o),t}function ko(e,t,n,r){e=t.state,\"function\"===typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,r),\"function\"===typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,r),t.state!==e&&vo.enqueueReplaceState(t,t.state,null)}function xo(e,t,n,r){var a=e.stateNode;a.props=n,a.state=e.memoizedState,a.refs=go,uo(e);var o=t.contextType;\"object\"===typeof o&&null!==o?a.context=lo(o):(o=ya(t)?ha:pa.current,a.context=ga(e,o)),mo(e,n,a,r),a.state=e.memoizedState,\"function\"===typeof(o=t.getDerivedStateFromProps)&&(yo(e,t,o,n),a.state=e.memoizedState),\"function\"===typeof t.getDerivedStateFromProps||\"function\"===typeof a.getSnapshotBeforeUpdate||\"function\"!==typeof a.UNSAFE_componentWillMount&&\"function\"!==typeof a.componentWillMount||(t=a.state,\"function\"===typeof a.componentWillMount&&a.componentWillMount(),\"function\"===typeof a.UNSAFE_componentWillMount&&a.UNSAFE_componentWillMount(),t!==a.state&&vo.enqueueReplaceState(a,a.state,null),mo(e,n,a,r),a.state=e.memoizedState),\"function\"===typeof a.componentDidMount&&(e.flags|=4)}var So=Array.isArray;function _o(e,t,n){if(null!==(e=n.ref)&&\"function\"!==typeof e&&\"object\"!==typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(l(309));var r=n.stateNode}if(!r)throw Error(l(147,e));var a=\"\"+e;return null!==t&&null!==t.ref&&\"function\"===typeof t.ref&&t.ref._stringRef===a?t.ref:(t=function(e){var t=r.refs;t===go&&(t=r.refs={}),null===e?delete t[a]:t[a]=e},t._stringRef=a,t)}if(\"string\"!==typeof e)throw Error(l(284));if(!n._owner)throw Error(l(290,e))}return e}function Eo(e,t){if(\"textarea\"!==e.type)throw Error(l(31,\"[object Object]\"===Object.prototype.toString.call(t)?\"object with keys {\"+Object.keys(t).join(\", \")+\"}\":t))}function Co(e){function t(t,n){if(e){var r=t.lastEffect;null!==r?(r.nextEffect=n,t.lastEffect=n):t.firstEffect=t.lastEffect=n,n.nextEffect=null,n.flags=8}}function n(n,r){if(!e)return null;for(;null!==r;)t(n,r),r=r.sibling;return null}function r(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function a(e,t){return(e=Qu(e,t)).index=0,e.sibling=null,e}function o(t,n,r){return t.index=r,e?null!==(r=t.alternate)?(r=r.index)<n?(t.flags=2,n):r:(t.flags=2,n):n}function i(t){return e&&null===t.alternate&&(t.flags=2),t}function u(e,t,n,r){return null===t||6!==t.tag?((t=Yu(n,e.mode,r)).return=e,t):((t=a(t,n)).return=e,t)}function c(e,t,n,r){return null!==t&&t.elementType===n.type?((r=a(t,n.props)).ref=_o(e,t,n),r.return=e,r):((r=qu(n.type,n.key,n.props,null,e.mode,r)).ref=_o(e,t,n),r.return=e,r)}function s(e,t,n,r){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Xu(n,e.mode,r)).return=e,t):((t=a(t,n.children||[])).return=e,t)}function f(e,t,n,r,o){return null===t||7!==t.tag?((t=Ku(n,e.mode,r,o)).return=e,t):((t=a(t,n)).return=e,t)}function d(e,t,n){if(\"string\"===typeof t||\"number\"===typeof t)return(t=Yu(\"\"+t,e.mode,n)).return=e,t;if(\"object\"===typeof t&&null!==t){switch(t.$$typeof){case x:return(n=qu(t.type,t.key,t.props,null,e.mode,n)).ref=_o(e,null,t),n.return=e,n;case S:return(t=Xu(t,e.mode,n)).return=e,t}if(So(t)||H(t))return(t=Ku(t,e.mode,n,null)).return=e,t;Eo(e,t)}return null}function p(e,t,n,r){var a=null!==t?t.key:null;if(\"string\"===typeof n||\"number\"===typeof n)return null!==a?null:u(e,t,\"\"+n,r);if(\"object\"===typeof n&&null!==n){switch(n.$$typeof){case x:return n.key===a?n.type===_?f(e,t,n.props.children,r,a):c(e,t,n,r):null;case S:return n.key===a?s(e,t,n,r):null}if(So(n)||H(n))return null!==a?null:f(e,t,n,r,null);Eo(e,n)}return null}function m(e,t,n,r,a){if(\"string\"===typeof r||\"number\"===typeof r)return u(t,e=e.get(n)||null,\"\"+r,a);if(\"object\"===typeof r&&null!==r){switch(r.$$typeof){case x:return e=e.get(null===r.key?n:r.key)||null,r.type===_?f(t,e,r.props.children,a,r.key):c(t,e,r,a);case S:return s(t,e=e.get(null===r.key?n:r.key)||null,r,a)}if(So(r)||H(r))return f(t,e=e.get(n)||null,r,a,null);Eo(t,r)}return null}function h(a,l,i,u){for(var c=null,s=null,f=l,h=l=0,g=null;null!==f&&h<i.length;h++){f.index>h?(g=f,f=null):g=f.sibling;var y=p(a,f,i[h],u);if(null===y){null===f&&(f=g);break}e&&f&&null===y.alternate&&t(a,f),l=o(y,l,h),null===s?c=y:s.sibling=y,s=y,f=g}if(h===i.length)return n(a,f),c;if(null===f){for(;h<i.length;h++)null!==(f=d(a,i[h],u))&&(l=o(f,l,h),null===s?c=f:s.sibling=f,s=f);return c}for(f=r(a,f);h<i.length;h++)null!==(g=m(f,a,h,i[h],u))&&(e&&null!==g.alternate&&f.delete(null===g.key?h:g.key),l=o(g,l,h),null===s?c=g:s.sibling=g,s=g);return e&&f.forEach((function(e){return t(a,e)})),c}function g(a,i,u,c){var s=H(u);if(\"function\"!==typeof s)throw Error(l(150));if(null==(u=s.call(u)))throw Error(l(151));for(var f=s=null,h=i,g=i=0,y=null,v=u.next();null!==h&&!v.done;g++,v=u.next()){h.index>g?(y=h,h=null):y=h.sibling;var b=p(a,h,v.value,c);if(null===b){null===h&&(h=y);break}e&&h&&null===b.alternate&&t(a,h),i=o(b,i,g),null===f?s=b:f.sibling=b,f=b,h=y}if(v.done)return n(a,h),s;if(null===h){for(;!v.done;g++,v=u.next())null!==(v=d(a,v.value,c))&&(i=o(v,i,g),null===f?s=v:f.sibling=v,f=v);return s}for(h=r(a,h);!v.done;g++,v=u.next())null!==(v=m(h,a,g,v.value,c))&&(e&&null!==v.alternate&&h.delete(null===v.key?g:v.key),i=o(v,i,g),null===f?s=v:f.sibling=v,f=v);return e&&h.forEach((function(e){return t(a,e)})),s}return function(e,r,o,u){var c=\"object\"===typeof o&&null!==o&&o.type===_&&null===o.key;c&&(o=o.props.children);var s=\"object\"===typeof o&&null!==o;if(s)switch(o.$$typeof){case x:e:{for(s=o.key,c=r;null!==c;){if(c.key===s){if(7===c.tag){if(o.type===_){n(e,c.sibling),(r=a(c,o.props.children)).return=e,e=r;break e}}else if(c.elementType===o.type){n(e,c.sibling),(r=a(c,o.props)).ref=_o(e,c,o),r.return=e,e=r;break e}n(e,c);break}t(e,c),c=c.sibling}o.type===_?((r=Ku(o.props.children,e.mode,u,o.key)).return=e,e=r):((u=qu(o.type,o.key,o.props,null,e.mode,u)).ref=_o(e,r,o),u.return=e,e=u)}return i(e);case S:e:{for(c=o.key;null!==r;){if(r.key===c){if(4===r.tag&&r.stateNode.containerInfo===o.containerInfo&&r.stateNode.implementation===o.implementation){n(e,r.sibling),(r=a(r,o.children||[])).return=e,e=r;break e}n(e,r);break}t(e,r),r=r.sibling}(r=Xu(o,e.mode,u)).return=e,e=r}return i(e)}if(\"string\"===typeof o||\"number\"===typeof o)return o=\"\"+o,null!==r&&6===r.tag?(n(e,r.sibling),(r=a(r,o)).return=e,e=r):(n(e,r),(r=Yu(o,e.mode,u)).return=e,e=r),i(e);if(So(o))return h(e,r,o,u);if(H(o))return g(e,r,o,u);if(s&&Eo(e,o),\"undefined\"===typeof o&&!c)switch(e.tag){case 1:case 22:case 0:case 11:case 15:throw Error(l(152,q(e.type)||\"Component\"))}return n(e,r)}}var No=Co(!0),To=Co(!1),zo={},Po=ca(zo),Lo=ca(zo),Ro=ca(zo);function Oo(e){if(e===zo)throw Error(l(174));return e}function jo(e,t){switch(fa(Ro,t),fa(Lo,e),fa(Po,zo),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:me(null,\"\");break;default:t=me(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}sa(Po),fa(Po,t)}function Mo(){sa(Po),sa(Lo),sa(Ro)}function Io(e){Oo(Ro.current);var t=Oo(Po.current),n=me(t,e.type);t!==n&&(fa(Lo,e),fa(Po,n))}function Fo(e){Lo.current===e&&(sa(Po),sa(Lo))}var Do=ca(0);function Ao(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||\"$?\"===n.data||\"$!\"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!==(64&t.flags))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var Uo=null,Bo=null,Ho=!1;function Vo(e,t){var n=Wu(5,null,null,0);n.elementType=\"DELETED\",n.type=\"DELETED\",n.stateNode=t,n.return=e,n.flags=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function Wo(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,!0);case 6:return null!==(t=\"\"===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,!0);default:return!1}}function $o(e){if(Ho){var t=Bo;if(t){var n=t;if(!Wo(e,t)){if(!(t=Kr(n.nextSibling))||!Wo(e,t))return e.flags=-1025&e.flags|2,Ho=!1,void(Uo=e);Vo(Uo,n)}Uo=e,Bo=Kr(t.firstChild)}else e.flags=-1025&e.flags|2,Ho=!1,Uo=e}}function Qo(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;Uo=e}function qo(e){if(e!==Uo)return!1;if(!Ho)return Qo(e),Ho=!0,!1;var t=e.type;if(5!==e.tag||\"head\"!==t&&\"body\"!==t&&!Wr(t,e.memoizedProps))for(t=Bo;t;)Vo(e,t),t=Kr(t.nextSibling);if(Qo(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(l(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if(\"/$\"===n){if(0===t){Bo=Kr(e.nextSibling);break e}t--}else\"$\"!==n&&\"$!\"!==n&&\"$?\"!==n||t++}e=e.nextSibling}Bo=null}}else Bo=Uo?Kr(e.stateNode.nextSibling):null;return!0}function Ko(){Bo=Uo=null,Ho=!1}var Go=[];function Yo(){for(var e=0;e<Go.length;e++)Go[e]._workInProgressVersionPrimary=null;Go.length=0}var Xo=k.ReactCurrentDispatcher,Zo=k.ReactCurrentBatchConfig,Jo=0,el=null,tl=null,nl=null,rl=!1,al=!1;function ol(){throw Error(l(321))}function ll(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!sr(e[n],t[n]))return!1;return!0}function il(e,t,n,r,a,o){if(Jo=o,el=t,t.memoizedState=null,t.updateQueue=null,t.lanes=0,Xo.current=null===e||null===e.memoizedState?Ol:jl,e=n(r,a),al){o=0;do{if(al=!1,!(25>o))throw Error(l(301));o+=1,nl=tl=null,t.updateQueue=null,Xo.current=Ml,e=n(r,a)}while(al)}if(Xo.current=Rl,t=null!==tl&&null!==tl.next,Jo=0,nl=tl=el=null,rl=!1,t)throw Error(l(300));return e}function ul(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===nl?el.memoizedState=nl=e:nl=nl.next=e,nl}function cl(){if(null===tl){var e=el.alternate;e=null!==e?e.memoizedState:null}else e=tl.next;var t=null===nl?el.memoizedState:nl.next;if(null!==t)nl=t,tl=e;else{if(null===e)throw Error(l(310));e={memoizedState:(tl=e).memoizedState,baseState:tl.baseState,baseQueue:tl.baseQueue,queue:tl.queue,next:null},null===nl?el.memoizedState=nl=e:nl=nl.next=e}return nl}function sl(e,t){return\"function\"===typeof t?t(e):t}function fl(e){var t=cl(),n=t.queue;if(null===n)throw Error(l(311));n.lastRenderedReducer=e;var r=tl,a=r.baseQueue,o=n.pending;if(null!==o){if(null!==a){var i=a.next;a.next=o.next,o.next=i}r.baseQueue=a=o,n.pending=null}if(null!==a){a=a.next,r=r.baseState;var u=i=o=null,c=a;do{var s=c.lane;if((Jo&s)===s)null!==u&&(u=u.next={lane:0,action:c.action,eagerReducer:c.eagerReducer,eagerState:c.eagerState,next:null}),r=c.eagerReducer===e?c.eagerState:e(r,c.action);else{var f={lane:s,action:c.action,eagerReducer:c.eagerReducer,eagerState:c.eagerState,next:null};null===u?(i=u=f,o=r):u=u.next=f,el.lanes|=s,Bi|=s}c=c.next}while(null!==c&&c!==a);null===u?o=r:u.next=i,sr(r,t.memoizedState)||(Fl=!0),t.memoizedState=r,t.baseState=o,t.baseQueue=u,n.lastRenderedState=r}return[t.memoizedState,n.dispatch]}function dl(e){var t=cl(),n=t.queue;if(null===n)throw Error(l(311));n.lastRenderedReducer=e;var r=n.dispatch,a=n.pending,o=t.memoizedState;if(null!==a){n.pending=null;var i=a=a.next;do{o=e(o,i.action),i=i.next}while(i!==a);sr(o,t.memoizedState)||(Fl=!0),t.memoizedState=o,null===t.baseQueue&&(t.baseState=o),n.lastRenderedState=o}return[o,r]}function pl(e,t,n){var r=t._getVersion;r=r(t._source);var a=t._workInProgressVersionPrimary;if(null!==a?e=a===r:(e=e.mutableReadLanes,(e=(Jo&e)===e)&&(t._workInProgressVersionPrimary=r,Go.push(t))),e)return n(t._source);throw Go.push(t),Error(l(350))}function ml(e,t,n,r){var a=Oi;if(null===a)throw Error(l(349));var o=t._getVersion,i=o(t._source),u=Xo.current,c=u.useState((function(){return pl(a,t,n)})),s=c[1],f=c[0];c=nl;var d=e.memoizedState,p=d.refs,m=p.getSnapshot,h=d.source;d=d.subscribe;var g=el;return e.memoizedState={refs:p,source:t,subscribe:r},u.useEffect((function(){p.getSnapshot=n,p.setSnapshot=s;var e=o(t._source);if(!sr(i,e)){e=n(t._source),sr(f,e)||(s(e),e=pu(g),a.mutableReadLanes|=e&a.pendingLanes),e=a.mutableReadLanes,a.entangledLanes|=e;for(var r=a.entanglements,l=e;0<l;){var u=31-Wt(l),c=1<<u;r[u]|=e,l&=~c}}}),[n,t,r]),u.useEffect((function(){return r(t._source,(function(){var e=p.getSnapshot,n=p.setSnapshot;try{n(e(t._source));var r=pu(g);a.mutableReadLanes|=r&a.pendingLanes}catch(o){n((function(){throw o}))}}))}),[t,r]),sr(m,n)&&sr(h,t)&&sr(d,r)||((e={pending:null,dispatch:null,lastRenderedReducer:sl,lastRenderedState:f}).dispatch=s=Ll.bind(null,el,e),c.queue=e,c.baseQueue=null,f=pl(a,t,n),c.memoizedState=c.baseState=f),f}function hl(e,t,n){return ml(cl(),e,t,n)}function gl(e){var t=ul();return\"function\"===typeof e&&(e=e()),t.memoizedState=t.baseState=e,e=(e=t.queue={pending:null,dispatch:null,lastRenderedReducer:sl,lastRenderedState:e}).dispatch=Ll.bind(null,el,e),[t.memoizedState,e]}function yl(e,t,n,r){return e={tag:e,create:t,destroy:n,deps:r,next:null},null===(t=el.updateQueue)?(t={lastEffect:null},el.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(r=n.next,n.next=e,e.next=r,t.lastEffect=e),e}function vl(e){return e={current:e},ul().memoizedState=e}function bl(){return cl().memoizedState}function wl(e,t,n,r){var a=ul();el.flags|=e,a.memoizedState=yl(1|t,n,void 0,void 0===r?null:r)}function kl(e,t,n,r){var a=cl();r=void 0===r?null:r;var o=void 0;if(null!==tl){var l=tl.memoizedState;if(o=l.destroy,null!==r&&ll(r,l.deps))return void yl(t,n,o,r)}el.flags|=e,a.memoizedState=yl(1|t,n,o,r)}function xl(e,t){return wl(516,4,e,t)}function Sl(e,t){return kl(516,4,e,t)}function _l(e,t){return kl(4,2,e,t)}function El(e,t){return\"function\"===typeof t?(e=e(),t(e),function(){t(null)}):null!==t&&void 0!==t?(e=e(),t.current=e,function(){t.current=null}):void 0}function Cl(e,t,n){return n=null!==n&&void 0!==n?n.concat([e]):null,kl(4,2,El.bind(null,t,e),n)}function Nl(){}function Tl(e,t){var n=cl();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&ll(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function zl(e,t){var n=cl();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&ll(t,r[1])?r[0]:(e=e(),n.memoizedState=[e,t],e)}function Pl(e,t){var n=Wa();Qa(98>n?98:n,(function(){e(!0)})),Qa(97<n?97:n,(function(){var n=Zo.transition;Zo.transition=1;try{e(!1),t()}finally{Zo.transition=n}}))}function Ll(e,t,n){var r=du(),a=pu(e),o={lane:a,action:n,eagerReducer:null,eagerState:null,next:null},l=t.pending;if(null===l?o.next=o:(o.next=l.next,l.next=o),t.pending=o,l=e.alternate,e===el||null!==l&&l===el)al=rl=!0;else{if(0===e.lanes&&(null===l||0===l.lanes)&&null!==(l=t.lastRenderedReducer))try{var i=t.lastRenderedState,u=l(i,n);if(o.eagerReducer=l,o.eagerState=u,sr(u,i))return}catch(c){}mu(e,a,r)}}var Rl={readContext:lo,useCallback:ol,useContext:ol,useEffect:ol,useImperativeHandle:ol,useLayoutEffect:ol,useMemo:ol,useReducer:ol,useRef:ol,useState:ol,useDebugValue:ol,useDeferredValue:ol,useTransition:ol,useMutableSource:ol,useOpaqueIdentifier:ol,unstable_isNewReconciler:!1},Ol={readContext:lo,useCallback:function(e,t){return ul().memoizedState=[e,void 0===t?null:t],e},useContext:lo,useEffect:xl,useImperativeHandle:function(e,t,n){return n=null!==n&&void 0!==n?n.concat([e]):null,wl(4,2,El.bind(null,t,e),n)},useLayoutEffect:function(e,t){return wl(4,2,e,t)},useMemo:function(e,t){var n=ul();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=ul();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e=(e=r.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t}).dispatch=Ll.bind(null,el,e),[r.memoizedState,e]},useRef:vl,useState:gl,useDebugValue:Nl,useDeferredValue:function(e){var t=gl(e),n=t[0],r=t[1];return xl((function(){var t=Zo.transition;Zo.transition=1;try{r(e)}finally{Zo.transition=t}}),[e]),n},useTransition:function(){var e=gl(!1),t=e[0];return vl(e=Pl.bind(null,e[1])),[e,t]},useMutableSource:function(e,t,n){var r=ul();return r.memoizedState={refs:{getSnapshot:t,setSnapshot:null},source:e,subscribe:n},ml(r,e,t,n)},useOpaqueIdentifier:function(){if(Ho){var e=!1,t=function(e){return{$$typeof:M,toString:e,valueOf:e}}((function(){throw e||(e=!0,n(\"r:\"+(Yr++).toString(36))),Error(l(355))})),n=gl(t)[1];return 0===(2&el.mode)&&(el.flags|=516,yl(5,(function(){n(\"r:\"+(Yr++).toString(36))}),void 0,null)),t}return gl(t=\"r:\"+(Yr++).toString(36)),t},unstable_isNewReconciler:!1},jl={readContext:lo,useCallback:Tl,useContext:lo,useEffect:Sl,useImperativeHandle:Cl,useLayoutEffect:_l,useMemo:zl,useReducer:fl,useRef:bl,useState:function(){return fl(sl)},useDebugValue:Nl,useDeferredValue:function(e){var t=fl(sl),n=t[0],r=t[1];return Sl((function(){var t=Zo.transition;Zo.transition=1;try{r(e)}finally{Zo.transition=t}}),[e]),n},useTransition:function(){var e=fl(sl)[0];return[bl().current,e]},useMutableSource:hl,useOpaqueIdentifier:function(){return fl(sl)[0]},unstable_isNewReconciler:!1},Ml={readContext:lo,useCallback:Tl,useContext:lo,useEffect:Sl,useImperativeHandle:Cl,useLayoutEffect:_l,useMemo:zl,useReducer:dl,useRef:bl,useState:function(){return dl(sl)},useDebugValue:Nl,useDeferredValue:function(e){var t=dl(sl),n=t[0],r=t[1];return Sl((function(){var t=Zo.transition;Zo.transition=1;try{r(e)}finally{Zo.transition=t}}),[e]),n},useTransition:function(){var e=dl(sl)[0];return[bl().current,e]},useMutableSource:hl,useOpaqueIdentifier:function(){return dl(sl)[0]},unstable_isNewReconciler:!1},Il=k.ReactCurrentOwner,Fl=!1;function Dl(e,t,n,r){t.child=null===e?To(t,null,n,r):No(t,e.child,n,r)}function Al(e,t,n,r,a){n=n.render;var o=t.ref;return oo(t,a),r=il(e,t,n,r,o,a),null===e||Fl?(t.flags|=1,Dl(e,t,r,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-517,e.lanes&=~a,oi(e,t,a))}function Ul(e,t,n,r,a,o){if(null===e){var l=n.type;return\"function\"!==typeof l||$u(l)||void 0!==l.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=qu(n.type,null,r,t,t.mode,o)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=l,Bl(e,t,l,r,a,o))}return l=e.child,0===(a&o)&&(a=l.memoizedProps,(n=null!==(n=n.compare)?n:dr)(a,r)&&e.ref===t.ref)?oi(e,t,o):(t.flags|=1,(e=Qu(l,r)).ref=t.ref,e.return=t,t.child=e)}function Bl(e,t,n,r,a,o){if(null!==e&&dr(e.memoizedProps,r)&&e.ref===t.ref){if(Fl=!1,0===(o&a))return t.lanes=e.lanes,oi(e,t,o);0!==(16384&e.flags)&&(Fl=!0)}return Wl(e,t,n,r,o)}function Hl(e,t,n){var r=t.pendingProps,a=r.children,o=null!==e?e.memoizedState:null;if(\"hidden\"===r.mode||\"unstable-defer-without-hiding\"===r.mode)if(0===(4&t.mode))t.memoizedState={baseLanes:0},xu(t,n);else{if(0===(1073741824&n))return e=null!==o?o.baseLanes|n:n,t.lanes=t.childLanes=1073741824,t.memoizedState={baseLanes:e},xu(t,e),null;t.memoizedState={baseLanes:0},xu(t,null!==o?o.baseLanes:n)}else null!==o?(r=o.baseLanes|n,t.memoizedState=null):r=n,xu(t,r);return Dl(e,t,a,n),t.child}function Vl(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.flags|=128)}function Wl(e,t,n,r,a){var o=ya(n)?ha:pa.current;return o=ga(t,o),oo(t,a),n=il(e,t,n,r,o,a),null===e||Fl?(t.flags|=1,Dl(e,t,n,a),t.child):(t.updateQueue=e.updateQueue,t.flags&=-517,e.lanes&=~a,oi(e,t,a))}function $l(e,t,n,r,a){if(ya(n)){var o=!0;ka(t)}else o=!1;if(oo(t,a),null===t.stateNode)null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),wo(t,n,r),xo(t,n,r,a),r=!0;else if(null===e){var l=t.stateNode,i=t.memoizedProps;l.props=i;var u=l.context,c=n.contextType;\"object\"===typeof c&&null!==c?c=lo(c):c=ga(t,c=ya(n)?ha:pa.current);var s=n.getDerivedStateFromProps,f=\"function\"===typeof s||\"function\"===typeof l.getSnapshotBeforeUpdate;f||\"function\"!==typeof l.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof l.componentWillReceiveProps||(i!==r||u!==c)&&ko(t,l,r,c),io=!1;var d=t.memoizedState;l.state=d,mo(t,r,l,a),u=t.memoizedState,i!==r||d!==u||ma.current||io?(\"function\"===typeof s&&(yo(t,n,s,r),u=t.memoizedState),(i=io||bo(t,n,i,r,d,u,c))?(f||\"function\"!==typeof l.UNSAFE_componentWillMount&&\"function\"!==typeof l.componentWillMount||(\"function\"===typeof l.componentWillMount&&l.componentWillMount(),\"function\"===typeof l.UNSAFE_componentWillMount&&l.UNSAFE_componentWillMount()),\"function\"===typeof l.componentDidMount&&(t.flags|=4)):(\"function\"===typeof l.componentDidMount&&(t.flags|=4),t.memoizedProps=r,t.memoizedState=u),l.props=r,l.state=u,l.context=c,r=i):(\"function\"===typeof l.componentDidMount&&(t.flags|=4),r=!1)}else{l=t.stateNode,co(e,t),i=t.memoizedProps,c=t.type===t.elementType?i:Xa(t.type,i),l.props=c,f=t.pendingProps,d=l.context,\"object\"===typeof(u=n.contextType)&&null!==u?u=lo(u):u=ga(t,u=ya(n)?ha:pa.current);var p=n.getDerivedStateFromProps;(s=\"function\"===typeof p||\"function\"===typeof l.getSnapshotBeforeUpdate)||\"function\"!==typeof l.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof l.componentWillReceiveProps||(i!==f||d!==u)&&ko(t,l,r,u),io=!1,d=t.memoizedState,l.state=d,mo(t,r,l,a);var m=t.memoizedState;i!==f||d!==m||ma.current||io?(\"function\"===typeof p&&(yo(t,n,p,r),m=t.memoizedState),(c=io||bo(t,n,c,r,d,m,u))?(s||\"function\"!==typeof l.UNSAFE_componentWillUpdate&&\"function\"!==typeof l.componentWillUpdate||(\"function\"===typeof l.componentWillUpdate&&l.componentWillUpdate(r,m,u),\"function\"===typeof l.UNSAFE_componentWillUpdate&&l.UNSAFE_componentWillUpdate(r,m,u)),\"function\"===typeof l.componentDidUpdate&&(t.flags|=4),\"function\"===typeof l.getSnapshotBeforeUpdate&&(t.flags|=256)):(\"function\"!==typeof l.componentDidUpdate||i===e.memoizedProps&&d===e.memoizedState||(t.flags|=4),\"function\"!==typeof l.getSnapshotBeforeUpdate||i===e.memoizedProps&&d===e.memoizedState||(t.flags|=256),t.memoizedProps=r,t.memoizedState=m),l.props=r,l.state=m,l.context=u,r=c):(\"function\"!==typeof l.componentDidUpdate||i===e.memoizedProps&&d===e.memoizedState||(t.flags|=4),\"function\"!==typeof l.getSnapshotBeforeUpdate||i===e.memoizedProps&&d===e.memoizedState||(t.flags|=256),r=!1)}return Ql(e,t,n,r,o,a)}function Ql(e,t,n,r,a,o){Vl(e,t);var l=0!==(64&t.flags);if(!r&&!l)return a&&xa(t,n,!1),oi(e,t,o);r=t.stateNode,Il.current=t;var i=l&&\"function\"!==typeof n.getDerivedStateFromError?null:r.render();return t.flags|=1,null!==e&&l?(t.child=No(t,e.child,null,o),t.child=No(t,null,i,o)):Dl(e,t,i,o),t.memoizedState=r.state,a&&xa(t,n,!0),t.child}function ql(e){var t=e.stateNode;t.pendingContext?ba(0,t.pendingContext,t.pendingContext!==t.context):t.context&&ba(0,t.context,!1),jo(e,t.containerInfo)}var Kl,Gl,Yl,Xl={dehydrated:null,retryLane:0};function Zl(e,t,n){var r,a=t.pendingProps,o=Do.current,l=!1;return(r=0!==(64&t.flags))||(r=(null===e||null!==e.memoizedState)&&0!==(2&o)),r?(l=!0,t.flags&=-65):null!==e&&null===e.memoizedState||void 0===a.fallback||!0===a.unstable_avoidThisFallback||(o|=1),fa(Do,1&o),null===e?(void 0!==a.fallback&&$o(t),e=a.children,o=a.fallback,l?(e=Jl(t,e,o,n),t.child.memoizedState={baseLanes:n},t.memoizedState=Xl,e):\"number\"===typeof a.unstable_expectedLoadTime?(e=Jl(t,e,o,n),t.child.memoizedState={baseLanes:n},t.memoizedState=Xl,t.lanes=33554432,e):((n=Gu({mode:\"visible\",children:e},t.mode,n,null)).return=t,t.child=n)):(e.memoizedState,l?(a=ti(e,t,a.children,a.fallback,n),l=t.child,o=e.child.memoizedState,l.memoizedState=null===o?{baseLanes:n}:{baseLanes:o.baseLanes|n},l.childLanes=e.childLanes&~n,t.memoizedState=Xl,a):(n=ei(e,t,a.children,n),t.memoizedState=null,n))}function Jl(e,t,n,r){var a=e.mode,o=e.child;return t={mode:\"hidden\",children:t},0===(2&a)&&null!==o?(o.childLanes=0,o.pendingProps=t):o=Gu(t,a,0,null),n=Ku(n,a,r,null),o.return=e,n.return=e,o.sibling=n,e.child=o,n}function ei(e,t,n,r){var a=e.child;return e=a.sibling,n=Qu(a,{mode:\"visible\",children:n}),0===(2&t.mode)&&(n.lanes=r),n.return=t,n.sibling=null,null!==e&&(e.nextEffect=null,e.flags=8,t.firstEffect=t.lastEffect=e),t.child=n}function ti(e,t,n,r,a){var o=t.mode,l=e.child;e=l.sibling;var i={mode:\"hidden\",children:n};return 0===(2&o)&&t.child!==l?((n=t.child).childLanes=0,n.pendingProps=i,null!==(l=n.lastEffect)?(t.firstEffect=n.firstEffect,t.lastEffect=l,l.nextEffect=null):t.firstEffect=t.lastEffect=null):n=Qu(l,i),null!==e?r=Qu(e,r):(r=Ku(r,o,a,null)).flags|=2,r.return=t,n.return=t,n.sibling=r,t.child=n,r}function ni(e,t){e.lanes|=t;var n=e.alternate;null!==n&&(n.lanes|=t),ao(e.return,t)}function ri(e,t,n,r,a,o){var l=e.memoizedState;null===l?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:r,tail:n,tailMode:a,lastEffect:o}:(l.isBackwards=t,l.rendering=null,l.renderingStartTime=0,l.last=r,l.tail=n,l.tailMode=a,l.lastEffect=o)}function ai(e,t,n){var r=t.pendingProps,a=r.revealOrder,o=r.tail;if(Dl(e,t,r.children,n),0!==(2&(r=Do.current)))r=1&r|2,t.flags|=64;else{if(null!==e&&0!==(64&e.flags))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&ni(e,n);else if(19===e.tag)ni(e,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}r&=1}if(fa(Do,r),0===(2&t.mode))t.memoizedState=null;else switch(a){case\"forwards\":for(n=t.child,a=null;null!==n;)null!==(e=n.alternate)&&null===Ao(e)&&(a=n),n=n.sibling;null===(n=a)?(a=t.child,t.child=null):(a=n.sibling,n.sibling=null),ri(t,!1,a,n,o,t.lastEffect);break;case\"backwards\":for(n=null,a=t.child,t.child=null;null!==a;){if(null!==(e=a.alternate)&&null===Ao(e)){t.child=a;break}e=a.sibling,a.sibling=n,n=a,a=e}ri(t,!0,n,null,o,t.lastEffect);break;case\"together\":ri(t,!1,null,null,void 0,t.lastEffect);break;default:t.memoizedState=null}return t.child}function oi(e,t,n){if(null!==e&&(t.dependencies=e.dependencies),Bi|=t.lanes,0!==(n&t.childLanes)){if(null!==e&&t.child!==e.child)throw Error(l(153));if(null!==t.child){for(n=Qu(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Qu(e,e.pendingProps)).return=t;n.sibling=null}return t.child}return null}function li(e,t){if(!Ho)switch(e.tailMode){case\"hidden\":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case\"collapsed\":n=e.tail;for(var r=null;null!==n;)null!==n.alternate&&(r=n),n=n.sibling;null===r?t||null===e.tail?e.tail=null:e.tail.sibling=null:r.sibling=null}}function ii(e,t,n){var r=t.pendingProps;switch(t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return null;case 1:case 17:return ya(t.type)&&va(),null;case 3:return Mo(),sa(ma),sa(pa),Yo(),(r=t.stateNode).pendingContext&&(r.context=r.pendingContext,r.pendingContext=null),null!==e&&null!==e.child||(qo(t)?t.flags|=4:r.hydrate||(t.flags|=256)),null;case 5:Fo(t);var o=Oo(Ro.current);if(n=t.type,null!==e&&null!=t.stateNode)Gl(e,t,n,r),e.ref!==t.ref&&(t.flags|=128);else{if(!r){if(null===t.stateNode)throw Error(l(166));return null}if(e=Oo(Po.current),qo(t)){r=t.stateNode,n=t.type;var i=t.memoizedProps;switch(r[Zr]=t,r[Jr]=i,n){case\"dialog\":Pr(\"cancel\",r),Pr(\"close\",r);break;case\"iframe\":case\"object\":case\"embed\":Pr(\"load\",r);break;case\"video\":case\"audio\":for(e=0;e<Cr.length;e++)Pr(Cr[e],r);break;case\"source\":Pr(\"error\",r);break;case\"img\":case\"image\":case\"link\":Pr(\"error\",r),Pr(\"load\",r);break;case\"details\":Pr(\"toggle\",r);break;case\"input\":ee(r,i),Pr(\"invalid\",r);break;case\"select\":r._wrapperState={wasMultiple:!!i.multiple},Pr(\"invalid\",r);break;case\"textarea\":ue(r,i),Pr(\"invalid\",r)}for(var c in _e(n,i),e=null,i)i.hasOwnProperty(c)&&(o=i[c],\"children\"===c?\"string\"===typeof o?r.textContent!==o&&(e=[\"children\",o]):\"number\"===typeof o&&r.textContent!==\"\"+o&&(e=[\"children\",\"\"+o]):u.hasOwnProperty(c)&&null!=o&&\"onScroll\"===c&&Pr(\"scroll\",r));switch(n){case\"input\":Y(r),re(r,i,!0);break;case\"textarea\":Y(r),se(r);break;case\"select\":case\"option\":break;default:\"function\"===typeof i.onClick&&(r.onclick=Ur)}r=e,t.updateQueue=r,null!==r&&(t.flags|=4)}else{switch(c=9===o.nodeType?o:o.ownerDocument,e===fe&&(e=pe(n)),e===fe?\"script\"===n?((e=c.createElement(\"div\")).innerHTML=\"<script><\\/script>\",e=e.removeChild(e.firstChild)):\"string\"===typeof r.is?e=c.createElement(n,{is:r.is}):(e=c.createElement(n),\"select\"===n&&(c=e,r.multiple?c.multiple=!0:r.size&&(c.size=r.size))):e=c.createElementNS(e,n),e[Zr]=t,e[Jr]=r,Kl(e,t),t.stateNode=e,c=Ee(n,r),n){case\"dialog\":Pr(\"cancel\",e),Pr(\"close\",e),o=r;break;case\"iframe\":case\"object\":case\"embed\":Pr(\"load\",e),o=r;break;case\"video\":case\"audio\":for(o=0;o<Cr.length;o++)Pr(Cr[o],e);o=r;break;case\"source\":Pr(\"error\",e),o=r;break;case\"img\":case\"image\":case\"link\":Pr(\"error\",e),Pr(\"load\",e),o=r;break;case\"details\":Pr(\"toggle\",e),o=r;break;case\"input\":ee(e,r),o=J(e,r),Pr(\"invalid\",e);break;case\"option\":o=oe(e,r);break;case\"select\":e._wrapperState={wasMultiple:!!r.multiple},o=a({},r,{value:void 0}),Pr(\"invalid\",e);break;case\"textarea\":ue(e,r),o=ie(e,r),Pr(\"invalid\",e);break;default:o=r}_e(n,o);var s=o;for(i in s)if(s.hasOwnProperty(i)){var f=s[i];\"style\"===i?xe(e,f):\"dangerouslySetInnerHTML\"===i?null!=(f=f?f.__html:void 0)&&ye(e,f):\"children\"===i?\"string\"===typeof f?(\"textarea\"!==n||\"\"!==f)&&ve(e,f):\"number\"===typeof f&&ve(e,\"\"+f):\"suppressContentEditableWarning\"!==i&&\"suppressHydrationWarning\"!==i&&\"autoFocus\"!==i&&(u.hasOwnProperty(i)?null!=f&&\"onScroll\"===i&&Pr(\"scroll\",e):null!=f&&w(e,i,f,c))}switch(n){case\"input\":Y(e),re(e,r,!1);break;case\"textarea\":Y(e),se(e);break;case\"option\":null!=r.value&&e.setAttribute(\"value\",\"\"+K(r.value));break;case\"select\":e.multiple=!!r.multiple,null!=(i=r.value)?le(e,!!r.multiple,i,!1):null!=r.defaultValue&&le(e,!!r.multiple,r.defaultValue,!0);break;default:\"function\"===typeof o.onClick&&(e.onclick=Ur)}Vr(n,r)&&(t.flags|=4)}null!==t.ref&&(t.flags|=128)}return null;case 6:if(e&&null!=t.stateNode)Yl(0,t,e.memoizedProps,r);else{if(\"string\"!==typeof r&&null===t.stateNode)throw Error(l(166));n=Oo(Ro.current),Oo(Po.current),qo(t)?(r=t.stateNode,n=t.memoizedProps,r[Zr]=t,r.nodeValue!==n&&(t.flags|=4)):((r=(9===n.nodeType?n:n.ownerDocument).createTextNode(r))[Zr]=t,t.stateNode=r)}return null;case 13:return sa(Do),r=t.memoizedState,0!==(64&t.flags)?(t.lanes=n,t):(r=null!==r,n=!1,null===e?void 0!==t.memoizedProps.fallback&&qo(t):n=null!==e.memoizedState,r&&!n&&0!==(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!==(1&Do.current)?0===Di&&(Di=3):(0!==Di&&3!==Di||(Di=4),null===Oi||0===(134217727&Bi)&&0===(134217727&Hi)||vu(Oi,Mi))),(r||n)&&(t.flags|=4),null);case 4:return Mo(),null===e&&Rr(t.stateNode.containerInfo),null;case 10:return ro(t),null;case 19:if(sa(Do),null===(r=t.memoizedState))return null;if(i=0!==(64&t.flags),null===(c=r.rendering))if(i)li(r,!1);else{if(0!==Di||null!==e&&0!==(64&e.flags))for(e=t.child;null!==e;){if(null!==(c=Ao(e))){for(t.flags|=64,li(r,!1),null!==(i=c.updateQueue)&&(t.updateQueue=i,t.flags|=4),null===r.lastEffect&&(t.firstEffect=null),t.lastEffect=r.lastEffect,r=n,n=t.child;null!==n;)e=r,(i=n).flags&=2,i.nextEffect=null,i.firstEffect=null,i.lastEffect=null,null===(c=i.alternate)?(i.childLanes=0,i.lanes=e,i.child=null,i.memoizedProps=null,i.memoizedState=null,i.updateQueue=null,i.dependencies=null,i.stateNode=null):(i.childLanes=c.childLanes,i.lanes=c.lanes,i.child=c.child,i.memoizedProps=c.memoizedProps,i.memoizedState=c.memoizedState,i.updateQueue=c.updateQueue,i.type=c.type,e=c.dependencies,i.dependencies=null===e?null:{lanes:e.lanes,firstContext:e.firstContext}),n=n.sibling;return fa(Do,1&Do.current|2),t.child}e=e.sibling}null!==r.tail&&Va()>Qi&&(t.flags|=64,i=!0,li(r,!1),t.lanes=33554432)}else{if(!i)if(null!==(e=Ao(c))){if(t.flags|=64,i=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.flags|=4),li(r,!0),null===r.tail&&\"hidden\"===r.tailMode&&!c.alternate&&!Ho)return null!==(t=t.lastEffect=r.lastEffect)&&(t.nextEffect=null),null}else 2*Va()-r.renderingStartTime>Qi&&1073741824!==n&&(t.flags|=64,i=!0,li(r,!1),t.lanes=33554432);r.isBackwards?(c.sibling=t.child,t.child=c):(null!==(n=r.last)?n.sibling=c:t.child=c,r.last=c)}return null!==r.tail?(n=r.tail,r.rendering=n,r.tail=n.sibling,r.lastEffect=t.lastEffect,r.renderingStartTime=Va(),n.sibling=null,t=Do.current,fa(Do,i?1&t|2:1&t),n):null;case 23:case 24:return Su(),null!==e&&null!==e.memoizedState!==(null!==t.memoizedState)&&\"unstable-defer-without-hiding\"!==r.mode&&(t.flags|=4),null}throw Error(l(156,t.tag))}function ui(e){switch(e.tag){case 1:ya(e.type)&&va();var t=e.flags;return 4096&t?(e.flags=-4097&t|64,e):null;case 3:if(Mo(),sa(ma),sa(pa),Yo(),0!==(64&(t=e.flags)))throw Error(l(285));return e.flags=-4097&t|64,e;case 5:return Fo(e),null;case 13:return sa(Do),4096&(t=e.flags)?(e.flags=-4097&t|64,e):null;case 19:return sa(Do),null;case 4:return Mo(),null;case 10:return ro(e),null;case 23:case 24:return Su(),null;default:return null}}function ci(e,t){try{var n=\"\",r=t;do{n+=Q(r),r=r.return}while(r);var a=n}catch(o){a=\"\\nError generating stack: \"+o.message+\"\\n\"+o.stack}return{value:e,source:t,stack:a}}function si(e,t){try{console.error(t.value)}catch(n){setTimeout((function(){throw n}))}}Kl=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Gl=function(e,t,n,r){var o=e.memoizedProps;if(o!==r){e=t.stateNode,Oo(Po.current);var l,i=null;switch(n){case\"input\":o=J(e,o),r=J(e,r),i=[];break;case\"option\":o=oe(e,o),r=oe(e,r),i=[];break;case\"select\":o=a({},o,{value:void 0}),r=a({},r,{value:void 0}),i=[];break;case\"textarea\":o=ie(e,o),r=ie(e,r),i=[];break;default:\"function\"!==typeof o.onClick&&\"function\"===typeof r.onClick&&(e.onclick=Ur)}for(f in _e(n,r),n=null,o)if(!r.hasOwnProperty(f)&&o.hasOwnProperty(f)&&null!=o[f])if(\"style\"===f){var c=o[f];for(l in c)c.hasOwnProperty(l)&&(n||(n={}),n[l]=\"\")}else\"dangerouslySetInnerHTML\"!==f&&\"children\"!==f&&\"suppressContentEditableWarning\"!==f&&\"suppressHydrationWarning\"!==f&&\"autoFocus\"!==f&&(u.hasOwnProperty(f)?i||(i=[]):(i=i||[]).push(f,null));for(f in r){var s=r[f];if(c=null!=o?o[f]:void 0,r.hasOwnProperty(f)&&s!==c&&(null!=s||null!=c))if(\"style\"===f)if(c){for(l in c)!c.hasOwnProperty(l)||s&&s.hasOwnProperty(l)||(n||(n={}),n[l]=\"\");for(l in s)s.hasOwnProperty(l)&&c[l]!==s[l]&&(n||(n={}),n[l]=s[l])}else n||(i||(i=[]),i.push(f,n)),n=s;else\"dangerouslySetInnerHTML\"===f?(s=s?s.__html:void 0,c=c?c.__html:void 0,null!=s&&c!==s&&(i=i||[]).push(f,s)):\"children\"===f?\"string\"!==typeof s&&\"number\"!==typeof s||(i=i||[]).push(f,\"\"+s):\"suppressContentEditableWarning\"!==f&&\"suppressHydrationWarning\"!==f&&(u.hasOwnProperty(f)?(null!=s&&\"onScroll\"===f&&Pr(\"scroll\",e),i||c===s||(i=[])):\"object\"===typeof s&&null!==s&&s.$$typeof===M?s.toString():(i=i||[]).push(f,s))}n&&(i=i||[]).push(\"style\",n);var f=i;(t.updateQueue=f)&&(t.flags|=4)}},Yl=function(e,t,n,r){n!==r&&(t.flags|=4)};var fi=\"function\"===typeof WeakMap?WeakMap:Map;function di(e,t,n){(n=so(-1,n)).tag=3,n.payload={element:null};var r=t.value;return n.callback=function(){Yi||(Yi=!0,Xi=r),si(0,t)},n}function pi(e,t,n){(n=so(-1,n)).tag=3;var r=e.type.getDerivedStateFromError;if(\"function\"===typeof r){var a=t.value;n.payload=function(){return si(0,t),r(a)}}var o=e.stateNode;return null!==o&&\"function\"===typeof o.componentDidCatch&&(n.callback=function(){\"function\"!==typeof r&&(null===Zi?Zi=new Set([this]):Zi.add(this),si(0,t));var e=t.stack;this.componentDidCatch(t.value,{componentStack:null!==e?e:\"\"})}),n}var mi=\"function\"===typeof WeakSet?WeakSet:Set;function hi(e){var t=e.ref;if(null!==t)if(\"function\"===typeof t)try{t(null)}catch(n){Uu(e,n)}else t.current=null}function gi(e,t){switch(t.tag){case 0:case 11:case 15:case 22:case 5:case 6:case 4:case 17:return;case 1:if(256&t.flags&&null!==e){var n=e.memoizedProps,r=e.memoizedState;t=(e=t.stateNode).getSnapshotBeforeUpdate(t.elementType===t.type?n:Xa(t.type,n),r),e.__reactInternalSnapshotBeforeUpdate=t}return;case 3:return void(256&t.flags&&qr(t.stateNode.containerInfo))}throw Error(l(163))}function yi(e,t,n){switch(n.tag){case 0:case 11:case 15:case 22:if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{if(3===(3&e.tag)){var r=e.create;e.destroy=r()}e=e.next}while(e!==t)}if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{var a=e;r=a.next,0!==(4&(a=a.tag))&&0!==(1&a)&&(Fu(n,e),Iu(n,e)),e=r}while(e!==t)}return;case 1:return e=n.stateNode,4&n.flags&&(null===t?e.componentDidMount():(r=n.elementType===n.type?t.memoizedProps:Xa(n.type,t.memoizedProps),e.componentDidUpdate(r,t.memoizedState,e.__reactInternalSnapshotBeforeUpdate))),void(null!==(t=n.updateQueue)&&ho(n,t,e));case 3:if(null!==(t=n.updateQueue)){if(e=null,null!==n.child)switch(n.child.tag){case 5:case 1:e=n.child.stateNode}ho(n,t,e)}return;case 5:return e=n.stateNode,void(null===t&&4&n.flags&&Vr(n.type,n.memoizedProps)&&e.focus());case 6:case 4:case 12:case 19:case 17:case 20:case 21:case 23:case 24:return;case 13:return void(null===n.memoizedState&&(n=n.alternate,null!==n&&(n=n.memoizedState,null!==n&&(n=n.dehydrated,null!==n&&xt(n)))))}throw Error(l(163))}function vi(e,t){for(var n=e;;){if(5===n.tag){var r=n.stateNode;if(t)\"function\"===typeof(r=r.style).setProperty?r.setProperty(\"display\",\"none\",\"important\"):r.display=\"none\";else{r=n.stateNode;var a=n.memoizedProps.style;a=void 0!==a&&null!==a&&a.hasOwnProperty(\"display\")?a.display:null,r.style.display=ke(\"display\",a)}}else if(6===n.tag)n.stateNode.nodeValue=t?\"\":n.memoizedProps;else if((23!==n.tag&&24!==n.tag||null===n.memoizedState||n===e)&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===e)break;for(;null===n.sibling;){if(null===n.return||n.return===e)return;n=n.return}n.sibling.return=n.return,n=n.sibling}}function bi(e,t){if(_a&&\"function\"===typeof _a.onCommitFiberUnmount)try{_a.onCommitFiberUnmount(Sa,t)}catch(o){}switch(t.tag){case 0:case 11:case 14:case 15:case 22:if(null!==(e=t.updateQueue)&&null!==(e=e.lastEffect)){var n=e=e.next;do{var r=n,a=r.destroy;if(r=r.tag,void 0!==a)if(0!==(4&r))Fu(t,n);else{r=t;try{a()}catch(o){Uu(r,o)}}n=n.next}while(n!==e)}break;case 1:if(hi(t),\"function\"===typeof(e=t.stateNode).componentWillUnmount)try{e.props=t.memoizedProps,e.state=t.memoizedState,e.componentWillUnmount()}catch(o){Uu(t,o)}break;case 5:hi(t);break;case 4:Ei(e,t)}}function wi(e){e.alternate=null,e.child=null,e.dependencies=null,e.firstEffect=null,e.lastEffect=null,e.memoizedProps=null,e.memoizedState=null,e.pendingProps=null,e.return=null,e.updateQueue=null}function ki(e){return 5===e.tag||3===e.tag||4===e.tag}function xi(e){e:{for(var t=e.return;null!==t;){if(ki(t))break e;t=t.return}throw Error(l(160))}var n=t;switch(t=n.stateNode,n.tag){case 5:var r=!1;break;case 3:case 4:t=t.containerInfo,r=!0;break;default:throw Error(l(161))}16&n.flags&&(ve(t,\"\"),n.flags&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||ki(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag&&18!==n.tag;){if(2&n.flags)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.flags)){n=n.stateNode;break e}}r?Si(e,n,t):_i(e,n,t)}function Si(e,t,n){var r=e.tag,a=5===r||6===r;if(a)e=a?e.stateNode:e.stateNode.instance,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!==(n=n._reactRootContainer)&&void 0!==n||null!==t.onclick||(t.onclick=Ur));else if(4!==r&&null!==(e=e.child))for(Si(e,t,n),e=e.sibling;null!==e;)Si(e,t,n),e=e.sibling}function _i(e,t,n){var r=e.tag,a=5===r||6===r;if(a)e=a?e.stateNode:e.stateNode.instance,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==r&&null!==(e=e.child))for(_i(e,t,n),e=e.sibling;null!==e;)_i(e,t,n),e=e.sibling}function Ei(e,t){for(var n,r,a=t,o=!1;;){if(!o){o=a.return;e:for(;;){if(null===o)throw Error(l(160));switch(n=o.stateNode,o.tag){case 5:r=!1;break e;case 3:case 4:n=n.containerInfo,r=!0;break e}o=o.return}o=!0}if(5===a.tag||6===a.tag){e:for(var i=e,u=a,c=u;;)if(bi(i,c),null!==c.child&&4!==c.tag)c.child.return=c,c=c.child;else{if(c===u)break e;for(;null===c.sibling;){if(null===c.return||c.return===u)break e;c=c.return}c.sibling.return=c.return,c=c.sibling}r?(i=n,u=a.stateNode,8===i.nodeType?i.parentNode.removeChild(u):i.removeChild(u)):n.removeChild(a.stateNode)}else if(4===a.tag){if(null!==a.child){n=a.stateNode.containerInfo,r=!0,a.child.return=a,a=a.child;continue}}else if(bi(e,a),null!==a.child){a.child.return=a,a=a.child;continue}if(a===t)break;for(;null===a.sibling;){if(null===a.return||a.return===t)return;4===(a=a.return).tag&&(o=!1)}a.sibling.return=a.return,a=a.sibling}}function Ci(e,t){switch(t.tag){case 0:case 11:case 14:case 15:case 22:var n=t.updateQueue;if(null!==(n=null!==n?n.lastEffect:null)){var r=n=n.next;do{3===(3&r.tag)&&(e=r.destroy,r.destroy=void 0,void 0!==e&&e()),r=r.next}while(r!==n)}return;case 1:case 12:case 17:return;case 5:if(null!=(n=t.stateNode)){r=t.memoizedProps;var a=null!==e?e.memoizedProps:r;e=t.type;var o=t.updateQueue;if(t.updateQueue=null,null!==o){for(n[Jr]=r,\"input\"===e&&\"radio\"===r.type&&null!=r.name&&te(n,r),Ee(e,a),t=Ee(e,r),a=0;a<o.length;a+=2){var i=o[a],u=o[a+1];\"style\"===i?xe(n,u):\"dangerouslySetInnerHTML\"===i?ye(n,u):\"children\"===i?ve(n,u):w(n,i,u,t)}switch(e){case\"input\":ne(n,r);break;case\"textarea\":ce(n,r);break;case\"select\":e=n._wrapperState.wasMultiple,n._wrapperState.wasMultiple=!!r.multiple,null!=(o=r.value)?le(n,!!r.multiple,o,!1):e!==!!r.multiple&&(null!=r.defaultValue?le(n,!!r.multiple,r.defaultValue,!0):le(n,!!r.multiple,r.multiple?[]:\"\",!1))}}}return;case 6:if(null===t.stateNode)throw Error(l(162));return void(t.stateNode.nodeValue=t.memoizedProps);case 3:return void((n=t.stateNode).hydrate&&(n.hydrate=!1,xt(n.containerInfo)));case 13:return null!==t.memoizedState&&($i=Va(),vi(t.child,!0)),void Ni(t);case 19:return void Ni(t);case 23:case 24:return void vi(t,null!==t.memoizedState)}throw Error(l(163))}function Ni(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new mi),t.forEach((function(t){var r=Hu.bind(null,e,t);n.has(t)||(n.add(t),t.then(r,r))}))}}function Ti(e,t){return null!==e&&(null===(e=e.memoizedState)||null!==e.dehydrated)&&(null!==(t=t.memoizedState)&&null===t.dehydrated)}var zi=Math.ceil,Pi=k.ReactCurrentDispatcher,Li=k.ReactCurrentOwner,Ri=0,Oi=null,ji=null,Mi=0,Ii=0,Fi=ca(0),Di=0,Ai=null,Ui=0,Bi=0,Hi=0,Vi=0,Wi=null,$i=0,Qi=1/0;function qi(){Qi=Va()+500}var Ki,Gi=null,Yi=!1,Xi=null,Zi=null,Ji=!1,eu=null,tu=90,nu=[],ru=[],au=null,ou=0,lu=null,iu=-1,uu=0,cu=0,su=null,fu=!1;function du(){return 0!==(48&Ri)?Va():-1!==iu?iu:iu=Va()}function pu(e){if(0===(2&(e=e.mode)))return 1;if(0===(4&e))return 99===Wa()?1:2;if(0===uu&&(uu=Ui),0!==Ya.transition){0!==cu&&(cu=null!==Wi?Wi.pendingLanes:0),e=uu;var t=4186112&~cu;return 0===(t&=-t)&&(0===(t=(e=4186112&~e)&-e)&&(t=8192)),t}return e=Wa(),0!==(4&Ri)&&98===e?e=Ut(12,uu):e=Ut(e=function(e){switch(e){case 99:return 15;case 98:return 10;case 97:case 96:return 8;case 95:return 2;default:return 0}}(e),uu),e}function mu(e,t,n){if(50<ou)throw ou=0,lu=null,Error(l(185));if(null===(e=hu(e,t)))return null;Vt(e,t,n),e===Oi&&(Hi|=t,4===Di&&vu(e,Mi));var r=Wa();1===t?0!==(8&Ri)&&0===(48&Ri)?bu(e):(gu(e,n),0===Ri&&(qi(),Ka())):(0===(4&Ri)||98!==r&&99!==r||(null===au?au=new Set([e]):au.add(e)),gu(e,n)),Wi=e}function hu(e,t){e.lanes|=t;var n=e.alternate;for(null!==n&&(n.lanes|=t),n=e,e=e.return;null!==e;)e.childLanes|=t,null!==(n=e.alternate)&&(n.childLanes|=t),n=e,e=e.return;return 3===n.tag?n.stateNode:null}function gu(e,t){for(var n=e.callbackNode,r=e.suspendedLanes,a=e.pingedLanes,o=e.expirationTimes,i=e.pendingLanes;0<i;){var u=31-Wt(i),c=1<<u,s=o[u];if(-1===s){if(0===(c&r)||0!==(c&a)){s=t,Ft(c);var f=It;o[u]=10<=f?s+250:6<=f?s+5e3:-1}}else s<=t&&(e.expiredLanes|=c);i&=~c}if(r=Dt(e,e===Oi?Mi:0),t=It,0===r)null!==n&&(n!==Fa&&Na(n),e.callbackNode=null,e.callbackPriority=0);else{if(null!==n){if(e.callbackPriority===t)return;n!==Fa&&Na(n)}15===t?(n=bu.bind(null,e),null===Aa?(Aa=[n],Ua=Ca(Ra,Ga)):Aa.push(n),n=Fa):14===t?n=qa(99,bu.bind(null,e)):(n=function(e){switch(e){case 15:case 14:return 99;case 13:case 12:case 11:case 10:return 98;case 9:case 8:case 7:case 6:case 4:case 5:return 97;case 3:case 2:case 1:return 95;case 0:return 90;default:throw Error(l(358,e))}}(t),n=qa(n,yu.bind(null,e))),e.callbackPriority=t,e.callbackNode=n}}function yu(e){if(iu=-1,cu=uu=0,0!==(48&Ri))throw Error(l(327));var t=e.callbackNode;if(Mu()&&e.callbackNode!==t)return null;var n=Dt(e,e===Oi?Mi:0);if(0===n)return null;var r=n,a=Ri;Ri|=16;var o=Cu();for(Oi===e&&Mi===r||(qi(),_u(e,r));;)try{zu();break}catch(u){Eu(e,u)}if(no(),Pi.current=o,Ri=a,null!==ji?r=0:(Oi=null,Mi=0,r=Di),0!==(Ui&Hi))_u(e,0);else if(0!==r){if(2===r&&(Ri|=64,e.hydrate&&(e.hydrate=!1,qr(e.containerInfo)),0!==(n=At(e))&&(r=Nu(e,n))),1===r)throw t=Ai,_u(e,0),vu(e,n),gu(e,Va()),t;switch(e.finishedWork=e.current.alternate,e.finishedLanes=n,r){case 0:case 1:throw Error(l(345));case 2:case 5:Ru(e);break;case 3:if(vu(e,n),(62914560&n)===n&&10<(r=$i+500-Va())){if(0!==Dt(e,0))break;if(((a=e.suspendedLanes)&n)!==n){du(),e.pingedLanes|=e.suspendedLanes&a;break}e.timeoutHandle=$r(Ru.bind(null,e),r);break}Ru(e);break;case 4:if(vu(e,n),(4186112&n)===n)break;for(r=e.eventTimes,a=-1;0<n;){var i=31-Wt(n);o=1<<i,(i=r[i])>a&&(a=i),n&=~o}if(n=a,10<(n=(120>(n=Va()-n)?120:480>n?480:1080>n?1080:1920>n?1920:3e3>n?3e3:4320>n?4320:1960*zi(n/1960))-n)){e.timeoutHandle=$r(Ru.bind(null,e),n);break}Ru(e);break;default:throw Error(l(329))}}return gu(e,Va()),e.callbackNode===t?yu.bind(null,e):null}function vu(e,t){for(t&=~Vi,t&=~Hi,e.suspendedLanes|=t,e.pingedLanes&=~t,e=e.expirationTimes;0<t;){var n=31-Wt(t),r=1<<n;e[n]=-1,t&=~r}}function bu(e){if(0!==(48&Ri))throw Error(l(327));if(Mu(),e===Oi&&0!==(e.expiredLanes&Mi)){var t=Mi,n=Nu(e,t);0!==(Ui&Hi)&&(n=Nu(e,t=Dt(e,t)))}else n=Nu(e,t=Dt(e,0));if(0!==e.tag&&2===n&&(Ri|=64,e.hydrate&&(e.hydrate=!1,qr(e.containerInfo)),0!==(t=At(e))&&(n=Nu(e,t))),1===n)throw n=Ai,_u(e,0),vu(e,t),gu(e,Va()),n;return e.finishedWork=e.current.alternate,e.finishedLanes=t,Ru(e),gu(e,Va()),null}function wu(e,t){var n=Ri;Ri|=1;try{return e(t)}finally{0===(Ri=n)&&(qi(),Ka())}}function ku(e,t){var n=Ri;Ri&=-2,Ri|=8;try{return e(t)}finally{0===(Ri=n)&&(qi(),Ka())}}function xu(e,t){fa(Fi,Ii),Ii|=t,Ui|=t}function Su(){Ii=Fi.current,sa(Fi)}function _u(e,t){e.finishedWork=null,e.finishedLanes=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,Qr(n)),null!==ji)for(n=ji.return;null!==n;){var r=n;switch(r.tag){case 1:null!==(r=r.type.childContextTypes)&&void 0!==r&&va();break;case 3:Mo(),sa(ma),sa(pa),Yo();break;case 5:Fo(r);break;case 4:Mo();break;case 13:case 19:sa(Do);break;case 10:ro(r);break;case 23:case 24:Su()}n=n.return}Oi=e,ji=Qu(e.current,null),Mi=Ii=Ui=t,Di=0,Ai=null,Vi=Hi=Bi=0}function Eu(e,t){for(;;){var n=ji;try{if(no(),Xo.current=Rl,rl){for(var r=el.memoizedState;null!==r;){var a=r.queue;null!==a&&(a.pending=null),r=r.next}rl=!1}if(Jo=0,nl=tl=el=null,al=!1,Li.current=null,null===n||null===n.return){Di=1,Ai=t,ji=null;break}e:{var o=e,l=n.return,i=n,u=t;if(t=Mi,i.flags|=2048,i.firstEffect=i.lastEffect=null,null!==u&&\"object\"===typeof u&&\"function\"===typeof u.then){var c=u;if(0===(2&i.mode)){var s=i.alternate;s?(i.updateQueue=s.updateQueue,i.memoizedState=s.memoizedState,i.lanes=s.lanes):(i.updateQueue=null,i.memoizedState=null)}var f=0!==(1&Do.current),d=l;do{var p;if(p=13===d.tag){var m=d.memoizedState;if(null!==m)p=null!==m.dehydrated;else{var h=d.memoizedProps;p=void 0!==h.fallback&&(!0!==h.unstable_avoidThisFallback||!f)}}if(p){var g=d.updateQueue;if(null===g){var y=new Set;y.add(c),d.updateQueue=y}else g.add(c);if(0===(2&d.mode)){if(d.flags|=64,i.flags|=16384,i.flags&=-2981,1===i.tag)if(null===i.alternate)i.tag=17;else{var v=so(-1,1);v.tag=2,fo(i,v)}i.lanes|=1;break e}u=void 0,i=t;var b=o.pingCache;if(null===b?(b=o.pingCache=new fi,u=new Set,b.set(c,u)):void 0===(u=b.get(c))&&(u=new Set,b.set(c,u)),!u.has(i)){u.add(i);var w=Bu.bind(null,o,c,i);c.then(w,w)}d.flags|=4096,d.lanes=t;break e}d=d.return}while(null!==d);u=Error((q(i.type)||\"A React component\")+\" suspended while rendering, but no fallback UI was specified.\\n\\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.\")}5!==Di&&(Di=2),u=ci(u,i),d=l;do{switch(d.tag){case 3:o=u,d.flags|=4096,t&=-t,d.lanes|=t,po(d,di(0,o,t));break e;case 1:o=u;var k=d.type,x=d.stateNode;if(0===(64&d.flags)&&(\"function\"===typeof k.getDerivedStateFromError||null!==x&&\"function\"===typeof x.componentDidCatch&&(null===Zi||!Zi.has(x)))){d.flags|=4096,t&=-t,d.lanes|=t,po(d,pi(d,o,t));break e}}d=d.return}while(null!==d)}Lu(n)}catch(S){t=S,ji===n&&null!==n&&(ji=n=n.return);continue}break}}function Cu(){var e=Pi.current;return Pi.current=Rl,null===e?Rl:e}function Nu(e,t){var n=Ri;Ri|=16;var r=Cu();for(Oi===e&&Mi===t||_u(e,t);;)try{Tu();break}catch(a){Eu(e,a)}if(no(),Ri=n,Pi.current=r,null!==ji)throw Error(l(261));return Oi=null,Mi=0,Di}function Tu(){for(;null!==ji;)Pu(ji)}function zu(){for(;null!==ji&&!Ta();)Pu(ji)}function Pu(e){var t=Ki(e.alternate,e,Ii);e.memoizedProps=e.pendingProps,null===t?Lu(e):ji=t,Li.current=null}function Lu(e){var t=e;do{var n=t.alternate;if(e=t.return,0===(2048&t.flags)){if(null!==(n=ii(n,t,Ii)))return void(ji=n);if(24!==(n=t).tag&&23!==n.tag||null===n.memoizedState||0!==(1073741824&Ii)||0===(4&n.mode)){for(var r=0,a=n.child;null!==a;)r|=a.lanes|a.childLanes,a=a.sibling;n.childLanes=r}null!==e&&0===(2048&e.flags)&&(null===e.firstEffect&&(e.firstEffect=t.firstEffect),null!==t.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=t.firstEffect),e.lastEffect=t.lastEffect),1<t.flags&&(null!==e.lastEffect?e.lastEffect.nextEffect=t:e.firstEffect=t,e.lastEffect=t))}else{if(null!==(n=ui(t)))return n.flags&=2047,void(ji=n);null!==e&&(e.firstEffect=e.lastEffect=null,e.flags|=2048)}if(null!==(t=t.sibling))return void(ji=t);ji=t=e}while(null!==t);0===Di&&(Di=5)}function Ru(e){var t=Wa();return Qa(99,Ou.bind(null,e,t)),null}function Ou(e,t){do{Mu()}while(null!==eu);if(0!==(48&Ri))throw Error(l(327));var n=e.finishedWork;if(null===n)return null;if(e.finishedWork=null,e.finishedLanes=0,n===e.current)throw Error(l(177));e.callbackNode=null;var r=n.lanes|n.childLanes,a=r,o=e.pendingLanes&~a;e.pendingLanes=a,e.suspendedLanes=0,e.pingedLanes=0,e.expiredLanes&=a,e.mutableReadLanes&=a,e.entangledLanes&=a,a=e.entanglements;for(var i=e.eventTimes,u=e.expirationTimes;0<o;){var c=31-Wt(o),s=1<<c;a[c]=0,i[c]=-1,u[c]=-1,o&=~s}if(null!==au&&0===(24&r)&&au.has(e)&&au.delete(e),e===Oi&&(ji=Oi=null,Mi=0),1<n.flags?null!==n.lastEffect?(n.lastEffect.nextEffect=n,r=n.firstEffect):r=n:r=n.firstEffect,null!==r){if(a=Ri,Ri|=32,Li.current=null,Br=Gt,yr(i=gr())){if(\"selectionStart\"in i)u={start:i.selectionStart,end:i.selectionEnd};else e:if(u=(u=i.ownerDocument)&&u.defaultView||window,(s=u.getSelection&&u.getSelection())&&0!==s.rangeCount){u=s.anchorNode,o=s.anchorOffset,c=s.focusNode,s=s.focusOffset;try{u.nodeType,c.nodeType}catch(C){u=null;break e}var f=0,d=-1,p=-1,m=0,h=0,g=i,y=null;t:for(;;){for(var v;g!==u||0!==o&&3!==g.nodeType||(d=f+o),g!==c||0!==s&&3!==g.nodeType||(p=f+s),3===g.nodeType&&(f+=g.nodeValue.length),null!==(v=g.firstChild);)y=g,g=v;for(;;){if(g===i)break t;if(y===u&&++m===o&&(d=f),y===c&&++h===s&&(p=f),null!==(v=g.nextSibling))break;y=(g=y).parentNode}g=v}u=-1===d||-1===p?null:{start:d,end:p}}else u=null;u=u||{start:0,end:0}}else u=null;Hr={focusedElem:i,selectionRange:u},Gt=!1,su=null,fu=!1,Gi=r;do{try{ju()}catch(C){if(null===Gi)throw Error(l(330));Uu(Gi,C),Gi=Gi.nextEffect}}while(null!==Gi);su=null,Gi=r;do{try{for(i=e;null!==Gi;){var b=Gi.flags;if(16&b&&ve(Gi.stateNode,\"\"),128&b){var w=Gi.alternate;if(null!==w){var k=w.ref;null!==k&&(\"function\"===typeof k?k(null):k.current=null)}}switch(1038&b){case 2:xi(Gi),Gi.flags&=-3;break;case 6:xi(Gi),Gi.flags&=-3,Ci(Gi.alternate,Gi);break;case 1024:Gi.flags&=-1025;break;case 1028:Gi.flags&=-1025,Ci(Gi.alternate,Gi);break;case 4:Ci(Gi.alternate,Gi);break;case 8:Ei(i,u=Gi);var x=u.alternate;wi(u),null!==x&&wi(x)}Gi=Gi.nextEffect}}catch(C){if(null===Gi)throw Error(l(330));Uu(Gi,C),Gi=Gi.nextEffect}}while(null!==Gi);if(k=Hr,w=gr(),b=k.focusedElem,i=k.selectionRange,w!==b&&b&&b.ownerDocument&&hr(b.ownerDocument.documentElement,b)){null!==i&&yr(b)&&(w=i.start,void 0===(k=i.end)&&(k=w),\"selectionStart\"in b?(b.selectionStart=w,b.selectionEnd=Math.min(k,b.value.length)):(k=(w=b.ownerDocument||document)&&w.defaultView||window).getSelection&&(k=k.getSelection(),u=b.textContent.length,x=Math.min(i.start,u),i=void 0===i.end?x:Math.min(i.end,u),!k.extend&&x>i&&(u=i,i=x,x=u),u=mr(b,x),o=mr(b,i),u&&o&&(1!==k.rangeCount||k.anchorNode!==u.node||k.anchorOffset!==u.offset||k.focusNode!==o.node||k.focusOffset!==o.offset)&&((w=w.createRange()).setStart(u.node,u.offset),k.removeAllRanges(),x>i?(k.addRange(w),k.extend(o.node,o.offset)):(w.setEnd(o.node,o.offset),k.addRange(w))))),w=[];for(k=b;k=k.parentNode;)1===k.nodeType&&w.push({element:k,left:k.scrollLeft,top:k.scrollTop});for(\"function\"===typeof b.focus&&b.focus(),b=0;b<w.length;b++)(k=w[b]).element.scrollLeft=k.left,k.element.scrollTop=k.top}Gt=!!Br,Hr=Br=null,e.current=n,Gi=r;do{try{for(b=e;null!==Gi;){var S=Gi.flags;if(36&S&&yi(b,Gi.alternate,Gi),128&S){w=void 0;var _=Gi.ref;if(null!==_){var E=Gi.stateNode;Gi.tag,w=E,\"function\"===typeof _?_(w):_.current=w}}Gi=Gi.nextEffect}}catch(C){if(null===Gi)throw Error(l(330));Uu(Gi,C),Gi=Gi.nextEffect}}while(null!==Gi);Gi=null,Da(),Ri=a}else e.current=n;if(Ji)Ji=!1,eu=e,tu=t;else for(Gi=r;null!==Gi;)t=Gi.nextEffect,Gi.nextEffect=null,8&Gi.flags&&((S=Gi).sibling=null,S.stateNode=null),Gi=t;if(0===(r=e.pendingLanes)&&(Zi=null),1===r?e===lu?ou++:(ou=0,lu=e):ou=0,n=n.stateNode,_a&&\"function\"===typeof _a.onCommitFiberRoot)try{_a.onCommitFiberRoot(Sa,n,void 0,64===(64&n.current.flags))}catch(C){}if(gu(e,Va()),Yi)throw Yi=!1,e=Xi,Xi=null,e;return 0!==(8&Ri)||Ka(),null}function ju(){for(;null!==Gi;){var e=Gi.alternate;fu||null===su||(0!==(8&Gi.flags)?et(Gi,su)&&(fu=!0):13===Gi.tag&&Ti(e,Gi)&&et(Gi,su)&&(fu=!0));var t=Gi.flags;0!==(256&t)&&gi(e,Gi),0===(512&t)||Ji||(Ji=!0,qa(97,(function(){return Mu(),null}))),Gi=Gi.nextEffect}}function Mu(){if(90!==tu){var e=97<tu?97:tu;return tu=90,Qa(e,Du)}return!1}function Iu(e,t){nu.push(t,e),Ji||(Ji=!0,qa(97,(function(){return Mu(),null})))}function Fu(e,t){ru.push(t,e),Ji||(Ji=!0,qa(97,(function(){return Mu(),null})))}function Du(){if(null===eu)return!1;var e=eu;if(eu=null,0!==(48&Ri))throw Error(l(331));var t=Ri;Ri|=32;var n=ru;ru=[];for(var r=0;r<n.length;r+=2){var a=n[r],o=n[r+1],i=a.destroy;if(a.destroy=void 0,\"function\"===typeof i)try{i()}catch(c){if(null===o)throw Error(l(330));Uu(o,c)}}for(n=nu,nu=[],r=0;r<n.length;r+=2){a=n[r],o=n[r+1];try{var u=a.create;a.destroy=u()}catch(c){if(null===o)throw Error(l(330));Uu(o,c)}}for(u=e.current.firstEffect;null!==u;)e=u.nextEffect,u.nextEffect=null,8&u.flags&&(u.sibling=null,u.stateNode=null),u=e;return Ri=t,Ka(),!0}function Au(e,t,n){fo(e,t=di(0,t=ci(n,t),1)),t=du(),null!==(e=hu(e,1))&&(Vt(e,1,t),gu(e,t))}function Uu(e,t){if(3===e.tag)Au(e,e,t);else for(var n=e.return;null!==n;){if(3===n.tag){Au(n,e,t);break}if(1===n.tag){var r=n.stateNode;if(\"function\"===typeof n.type.getDerivedStateFromError||\"function\"===typeof r.componentDidCatch&&(null===Zi||!Zi.has(r))){var a=pi(n,e=ci(t,e),1);if(fo(n,a),a=du(),null!==(n=hu(n,1)))Vt(n,1,a),gu(n,a);else if(\"function\"===typeof r.componentDidCatch&&(null===Zi||!Zi.has(r)))try{r.componentDidCatch(t,e)}catch(o){}break}}n=n.return}}function Bu(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),t=du(),e.pingedLanes|=e.suspendedLanes&n,Oi===e&&(Mi&n)===n&&(4===Di||3===Di&&(62914560&Mi)===Mi&&500>Va()-$i?_u(e,0):Vi|=n),gu(e,t)}function Hu(e,t){var n=e.stateNode;null!==n&&n.delete(t),0===(t=0)&&(0===(2&(t=e.mode))?t=1:0===(4&t)?t=99===Wa()?1:2:(0===uu&&(uu=Ui),0===(t=Bt(62914560&~uu))&&(t=4194304))),n=du(),null!==(e=hu(e,t))&&(Vt(e,t,n),gu(e,n))}function Vu(e,t,n,r){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=r,this.flags=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.childLanes=this.lanes=0,this.alternate=null}function Wu(e,t,n,r){return new Vu(e,t,n,r)}function $u(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Qu(e,t){var n=e.alternate;return null===n?((n=Wu(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.type=e.type,n.flags=0,n.nextEffect=null,n.firstEffect=null,n.lastEffect=null),n.childLanes=e.childLanes,n.lanes=e.lanes,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{lanes:t.lanes,firstContext:t.firstContext},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function qu(e,t,n,r,a,o){var i=2;if(r=e,\"function\"===typeof e)$u(e)&&(i=1);else if(\"string\"===typeof e)i=5;else e:switch(e){case _:return Ku(n.children,a,o,t);case I:i=8,a|=16;break;case E:i=8,a|=1;break;case C:return(e=Wu(12,n,t,8|a)).elementType=C,e.type=C,e.lanes=o,e;case P:return(e=Wu(13,n,t,a)).type=P,e.elementType=P,e.lanes=o,e;case L:return(e=Wu(19,n,t,a)).elementType=L,e.lanes=o,e;case F:return Gu(n,a,o,t);case D:return(e=Wu(24,n,t,a)).elementType=D,e.lanes=o,e;default:if(\"object\"===typeof e&&null!==e)switch(e.$$typeof){case N:i=10;break e;case T:i=9;break e;case z:i=11;break e;case R:i=14;break e;case O:i=16,r=null;break e;case j:i=22;break e}throw Error(l(130,null==e?e:typeof e,\"\"))}return(t=Wu(i,n,t,a)).elementType=e,t.type=r,t.lanes=o,t}function Ku(e,t,n,r){return(e=Wu(7,e,r,t)).lanes=n,e}function Gu(e,t,n,r){return(e=Wu(23,e,r,t)).elementType=F,e.lanes=n,e}function Yu(e,t,n){return(e=Wu(6,e,null,t)).lanes=n,e}function Xu(e,t,n){return(t=Wu(4,null!==e.children?e.children:[],e.key,t)).lanes=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function Zu(e,t,n){this.tag=t,this.containerInfo=e,this.finishedWork=this.pingCache=this.current=this.pendingChildren=null,this.timeoutHandle=-1,this.pendingContext=this.context=null,this.hydrate=n,this.callbackNode=null,this.callbackPriority=0,this.eventTimes=Ht(0),this.expirationTimes=Ht(-1),this.entangledLanes=this.finishedLanes=this.mutableReadLanes=this.expiredLanes=this.pingedLanes=this.suspendedLanes=this.pendingLanes=0,this.entanglements=Ht(0),this.mutableSourceEagerHydrationData=null}function Ju(e,t,n){var r=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:S,key:null==r?null:\"\"+r,children:e,containerInfo:t,implementation:n}}function ec(e,t,n,r){var a=t.current,o=du(),i=pu(a);e:if(n){t:{if(Ye(n=n._reactInternals)!==n||1!==n.tag)throw Error(l(170));var u=n;do{switch(u.tag){case 3:u=u.stateNode.context;break t;case 1:if(ya(u.type)){u=u.stateNode.__reactInternalMemoizedMergedChildContext;break t}}u=u.return}while(null!==u);throw Error(l(171))}if(1===n.tag){var c=n.type;if(ya(c)){n=wa(n,c,u);break e}}n=u}else n=da;return null===t.context?t.context=n:t.pendingContext=n,(t=so(o,i)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),fo(a,t),mu(a,i,o),i}function tc(e){return(e=e.current).child?(e.child.tag,e.child.stateNode):null}function nc(e,t){if(null!==(e=e.memoizedState)&&null!==e.dehydrated){var n=e.retryLane;e.retryLane=0!==n&&n<t?n:t}}function rc(e,t){nc(e,t),(e=e.alternate)&&nc(e,t)}function ac(e,t,n){var r=null!=n&&null!=n.hydrationOptions&&n.hydrationOptions.mutableSources||null;if(n=new Zu(e,t,null!=n&&!0===n.hydrate),t=Wu(3,null,null,2===t?7:1===t?3:0),n.current=t,t.stateNode=n,uo(t),e[ea]=n.current,Rr(8===e.nodeType?e.parentNode:e),r)for(e=0;e<r.length;e++){var a=(t=r[e])._getVersion;a=a(t._source),null==n.mutableSourceEagerHydrationData?n.mutableSourceEagerHydrationData=[t,a]:n.mutableSourceEagerHydrationData.push(t,a)}this._internalRoot=n}function oc(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||\" react-mount-point-unstable \"!==e.nodeValue))}function lc(e,t,n,r,a){var o=n._reactRootContainer;if(o){var l=o._internalRoot;if(\"function\"===typeof a){var i=a;a=function(){var e=tc(l);i.call(e)}}ec(t,l,e,a)}else{if(o=n._reactRootContainer=function(e,t){if(t||(t=!(!(t=e?9===e.nodeType?e.documentElement:e.firstChild:null)||1!==t.nodeType||!t.hasAttribute(\"data-reactroot\"))),!t)for(var n;n=e.lastChild;)e.removeChild(n);return new ac(e,0,t?{hydrate:!0}:void 0)}(n,r),l=o._internalRoot,\"function\"===typeof a){var u=a;a=function(){var e=tc(l);u.call(e)}}ku((function(){ec(t,l,e,a)}))}return tc(l)}function ic(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!oc(t))throw Error(l(200));return Ju(e,t,null,n)}Ki=function(e,t,n){var r=t.lanes;if(null!==e)if(e.memoizedProps!==t.pendingProps||ma.current)Fl=!0;else{if(0===(n&r)){switch(Fl=!1,t.tag){case 3:ql(t),Ko();break;case 5:Io(t);break;case 1:ya(t.type)&&ka(t);break;case 4:jo(t,t.stateNode.containerInfo);break;case 10:r=t.memoizedProps.value;var a=t.type._context;fa(Za,a._currentValue),a._currentValue=r;break;case 13:if(null!==t.memoizedState)return 0!==(n&t.child.childLanes)?Zl(e,t,n):(fa(Do,1&Do.current),null!==(t=oi(e,t,n))?t.sibling:null);fa(Do,1&Do.current);break;case 19:if(r=0!==(n&t.childLanes),0!==(64&e.flags)){if(r)return ai(e,t,n);t.flags|=64}if(null!==(a=t.memoizedState)&&(a.rendering=null,a.tail=null,a.lastEffect=null),fa(Do,Do.current),r)break;return null;case 23:case 24:return t.lanes=0,Hl(e,t,n)}return oi(e,t,n)}Fl=0!==(16384&e.flags)}else Fl=!1;switch(t.lanes=0,t.tag){case 2:if(r=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),e=t.pendingProps,a=ga(t,pa.current),oo(t,n),a=il(null,t,r,e,a,n),t.flags|=1,\"object\"===typeof a&&null!==a&&\"function\"===typeof a.render&&void 0===a.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,ya(r)){var o=!0;ka(t)}else o=!1;t.memoizedState=null!==a.state&&void 0!==a.state?a.state:null,uo(t);var i=r.getDerivedStateFromProps;\"function\"===typeof i&&yo(t,r,i,e),a.updater=vo,t.stateNode=a,a._reactInternals=t,xo(t,r,e,n),t=Ql(null,t,r,!0,o,n)}else t.tag=0,Dl(null,t,a,n),t=t.child;return t;case 16:a=t.elementType;e:{switch(null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),e=t.pendingProps,a=(o=a._init)(a._payload),t.type=a,o=t.tag=function(e){if(\"function\"===typeof e)return $u(e)?1:0;if(void 0!==e&&null!==e){if((e=e.$$typeof)===z)return 11;if(e===R)return 14}return 2}(a),e=Xa(a,e),o){case 0:t=Wl(null,t,a,e,n);break e;case 1:t=$l(null,t,a,e,n);break e;case 11:t=Al(null,t,a,e,n);break e;case 14:t=Ul(null,t,a,Xa(a.type,e),r,n);break e}throw Error(l(306,a,\"\"))}return t;case 0:return r=t.type,a=t.pendingProps,Wl(e,t,r,a=t.elementType===r?a:Xa(r,a),n);case 1:return r=t.type,a=t.pendingProps,$l(e,t,r,a=t.elementType===r?a:Xa(r,a),n);case 3:if(ql(t),r=t.updateQueue,null===e||null===r)throw Error(l(282));if(r=t.pendingProps,a=null!==(a=t.memoizedState)?a.element:null,co(e,t),mo(t,r,null,n),(r=t.memoizedState.element)===a)Ko(),t=oi(e,t,n);else{if((o=(a=t.stateNode).hydrate)&&(Bo=Kr(t.stateNode.containerInfo.firstChild),Uo=t,o=Ho=!0),o){if(null!=(e=a.mutableSourceEagerHydrationData))for(a=0;a<e.length;a+=2)(o=e[a])._workInProgressVersionPrimary=e[a+1],Go.push(o);for(n=To(t,null,r,n),t.child=n;n;)n.flags=-3&n.flags|1024,n=n.sibling}else Dl(e,t,r,n),Ko();t=t.child}return t;case 5:return Io(t),null===e&&$o(t),r=t.type,a=t.pendingProps,o=null!==e?e.memoizedProps:null,i=a.children,Wr(r,a)?i=null:null!==o&&Wr(r,o)&&(t.flags|=16),Vl(e,t),Dl(e,t,i,n),t.child;case 6:return null===e&&$o(t),null;case 13:return Zl(e,t,n);case 4:return jo(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=No(t,null,r,n):Dl(e,t,r,n),t.child;case 11:return r=t.type,a=t.pendingProps,Al(e,t,r,a=t.elementType===r?a:Xa(r,a),n);case 7:return Dl(e,t,t.pendingProps,n),t.child;case 8:case 12:return Dl(e,t,t.pendingProps.children,n),t.child;case 10:e:{r=t.type._context,a=t.pendingProps,i=t.memoizedProps,o=a.value;var u=t.type._context;if(fa(Za,u._currentValue),u._currentValue=o,null!==i)if(u=i.value,0===(o=sr(u,o)?0:0|(\"function\"===typeof r._calculateChangedBits?r._calculateChangedBits(u,o):1073741823))){if(i.children===a.children&&!ma.current){t=oi(e,t,n);break e}}else for(null!==(u=t.child)&&(u.return=t);null!==u;){var c=u.dependencies;if(null!==c){i=u.child;for(var s=c.firstContext;null!==s;){if(s.context===r&&0!==(s.observedBits&o)){1===u.tag&&((s=so(-1,n&-n)).tag=2,fo(u,s)),u.lanes|=n,null!==(s=u.alternate)&&(s.lanes|=n),ao(u.return,n),c.lanes|=n;break}s=s.next}}else i=10===u.tag&&u.type===t.type?null:u.child;if(null!==i)i.return=u;else for(i=u;null!==i;){if(i===t){i=null;break}if(null!==(u=i.sibling)){u.return=i.return,i=u;break}i=i.return}u=i}Dl(e,t,a.children,n),t=t.child}return t;case 9:return a=t.type,r=(o=t.pendingProps).children,oo(t,n),r=r(a=lo(a,o.unstable_observedBits)),t.flags|=1,Dl(e,t,r,n),t.child;case 14:return o=Xa(a=t.type,t.pendingProps),Ul(e,t,a,o=Xa(a.type,o),r,n);case 15:return Bl(e,t,t.type,t.pendingProps,r,n);case 17:return r=t.type,a=t.pendingProps,a=t.elementType===r?a:Xa(r,a),null!==e&&(e.alternate=null,t.alternate=null,t.flags|=2),t.tag=1,ya(r)?(e=!0,ka(t)):e=!1,oo(t,n),wo(t,r,a),xo(t,r,a,n),Ql(null,t,r,!0,e,n);case 19:return ai(e,t,n);case 23:case 24:return Hl(e,t,n)}throw Error(l(156,t.tag))},ac.prototype.render=function(e){ec(e,this._internalRoot,null,null)},ac.prototype.unmount=function(){var e=this._internalRoot,t=e.containerInfo;ec(null,e,null,(function(){t[ea]=null}))},tt=function(e){13===e.tag&&(mu(e,4,du()),rc(e,4))},nt=function(e){13===e.tag&&(mu(e,67108864,du()),rc(e,67108864))},rt=function(e){if(13===e.tag){var t=du(),n=pu(e);mu(e,n,t),rc(e,n)}},at=function(e,t){return t()},Ne=function(e,t,n){switch(t){case\"input\":if(ne(e,n),t=n.name,\"radio\"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll(\"input[name=\"+JSON.stringify(\"\"+t)+'][type=\"radio\"]'),t=0;t<n.length;t++){var r=n[t];if(r!==e&&r.form===e.form){var a=oa(r);if(!a)throw Error(l(90));X(r),ne(r,a)}}}break;case\"textarea\":ce(e,n);break;case\"select\":null!=(t=n.value)&&le(e,!!n.multiple,t,!1)}},Oe=wu,je=function(e,t,n,r,a){var o=Ri;Ri|=4;try{return Qa(98,e.bind(null,t,n,r,a))}finally{0===(Ri=o)&&(qi(),Ka())}},Me=function(){0===(49&Ri)&&(function(){if(null!==au){var e=au;au=null,e.forEach((function(e){e.expiredLanes|=24&e.pendingLanes,gu(e,Va())}))}Ka()}(),Mu())},Ie=function(e,t){var n=Ri;Ri|=2;try{return e(t)}finally{0===(Ri=n)&&(qi(),Ka())}};var uc={Events:[ra,aa,oa,Le,Re,Mu,{current:!1}]},cc={findFiberByHostInstance:na,bundleType:0,version:\"17.0.2\",rendererPackageName:\"react-dom\"},sc={bundleType:cc.bundleType,version:cc.version,rendererPackageName:cc.rendererPackageName,rendererConfig:cc.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:k.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=Je(e))?null:e.stateNode},findFiberByHostInstance:cc.findFiberByHostInstance||function(){return null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null};if(\"undefined\"!==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var fc=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!fc.isDisabled&&fc.supportsFiber)try{Sa=fc.inject(sc),_a=fc}catch(ge){}}t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=uc,t.createPortal=ic,t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternals;if(void 0===t){if(\"function\"===typeof e.render)throw Error(l(188));throw Error(l(268,Object.keys(e)))}return e=null===(e=Je(t))?null:e.stateNode},t.flushSync=function(e,t){var n=Ri;if(0!==(48&n))return e(t);Ri|=1;try{if(e)return Qa(99,e.bind(null,t))}finally{Ri=n,Ka()}},t.hydrate=function(e,t,n){if(!oc(t))throw Error(l(200));return lc(null,e,t,!0,n)},t.render=function(e,t,n){if(!oc(t))throw Error(l(200));return lc(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!oc(e))throw Error(l(40));return!!e._reactRootContainer&&(ku((function(){lc(null,null,e,!1,(function(){e._reactRootContainer=null,e[ea]=null}))})),!0)},t.unstable_batchedUpdates=wu,t.unstable_createPortal=function(e,t){return ic(e,t,2<arguments.length&&void 0!==arguments[2]?arguments[2]:null)},t.unstable_renderSubtreeIntoContainer=function(e,t,n,r){if(!oc(n))throw Error(l(200));if(null==e||void 0===e._reactInternals)throw Error(l(38));return lc(e,t,n,!1,r)},t.version=\"17.0.2\"},164:function(e,t,n){!function e(){if(\"undefined\"!==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&\"function\"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(463)},374:function(e,t,n){n(725);var r=n(791),a=60103;if(60107,\"function\"===typeof Symbol&&Symbol.for){var o=Symbol.for;a=o(\"react.element\"),o(\"react.fragment\")}var l=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i=Object.prototype.hasOwnProperty,u={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var r,o={},c=null,s=null;for(r in void 0!==n&&(c=\"\"+n),void 0!==t.key&&(c=\"\"+t.key),void 0!==t.ref&&(s=t.ref),t)i.call(t,r)&&!u.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===o[r]&&(o[r]=t[r]);return{$$typeof:a,type:e,key:c,ref:s,props:o,_owner:l.current}}t.jsx=c,t.jsxs=c},117:function(e,t,n){var r=n(725),a=60103,o=60106;t.Fragment=60107,t.StrictMode=60108,t.Profiler=60114;var l=60109,i=60110,u=60112;t.Suspense=60113;var c=60115,s=60116;if(\"function\"===typeof Symbol&&Symbol.for){var f=Symbol.for;a=f(\"react.element\"),o=f(\"react.portal\"),t.Fragment=f(\"react.fragment\"),t.StrictMode=f(\"react.strict_mode\"),t.Profiler=f(\"react.profiler\"),l=f(\"react.provider\"),i=f(\"react.context\"),u=f(\"react.forward_ref\"),t.Suspense=f(\"react.suspense\"),c=f(\"react.memo\"),s=f(\"react.lazy\")}var d=\"function\"===typeof Symbol&&Symbol.iterator;function p(e){for(var t=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+e,n=1;n<arguments.length;n++)t+=\"&args[]=\"+encodeURIComponent(arguments[n]);return\"Minified React error #\"+e+\"; visit \"+t+\" for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\"}var m={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},h={};function g(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||m}function y(){}function v(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||m}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if(\"object\"!==typeof e&&\"function\"!==typeof e&&null!=e)throw Error(p(85));this.updater.enqueueSetState(this,e,t,\"setState\")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,\"forceUpdate\")},y.prototype=g.prototype;var b=v.prototype=new y;b.constructor=v,r(b,g.prototype),b.isPureReactComponent=!0;var w={current:null},k=Object.prototype.hasOwnProperty,x={key:!0,ref:!0,__self:!0,__source:!0};function S(e,t,n){var r,o={},l=null,i=null;if(null!=t)for(r in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(l=\"\"+t.key),t)k.call(t,r)&&!x.hasOwnProperty(r)&&(o[r]=t[r]);var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){for(var c=Array(u),s=0;s<u;s++)c[s]=arguments[s+2];o.children=c}if(e&&e.defaultProps)for(r in u=e.defaultProps)void 0===o[r]&&(o[r]=u[r]);return{$$typeof:a,type:e,key:l,ref:i,props:o,_owner:w.current}}function _(e){return\"object\"===typeof e&&null!==e&&e.$$typeof===a}var E=/\\/+/g;function C(e,t){return\"object\"===typeof e&&null!==e&&null!=e.key?function(e){var t={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+e.replace(/[=:]/g,(function(e){return t[e]}))}(\"\"+e.key):t.toString(36)}function N(e,t,n,r,l){var i=typeof e;\"undefined\"!==i&&\"boolean\"!==i||(e=null);var u=!1;if(null===e)u=!0;else switch(i){case\"string\":case\"number\":u=!0;break;case\"object\":switch(e.$$typeof){case a:case o:u=!0}}if(u)return l=l(u=e),e=\"\"===r?\".\"+C(u,0):r,Array.isArray(l)?(n=\"\",null!=e&&(n=e.replace(E,\"$&/\")+\"/\"),N(l,t,n,\"\",(function(e){return e}))):null!=l&&(_(l)&&(l=function(e,t){return{$$typeof:a,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(l,n+(!l.key||u&&u.key===l.key?\"\":(\"\"+l.key).replace(E,\"$&/\")+\"/\")+e)),t.push(l)),1;if(u=0,r=\"\"===r?\".\":r+\":\",Array.isArray(e))for(var c=0;c<e.length;c++){var s=r+C(i=e[c],c);u+=N(i,t,n,s,l)}else if(s=function(e){return null===e||\"object\"!==typeof e?null:\"function\"===typeof(e=d&&e[d]||e[\"@@iterator\"])?e:null}(e),\"function\"===typeof s)for(e=s.call(e),c=0;!(i=e.next()).done;)u+=N(i=i.value,t,n,s=r+C(i,c++),l);else if(\"object\"===i)throw t=\"\"+e,Error(p(31,\"[object Object]\"===t?\"object with keys {\"+Object.keys(e).join(\", \")+\"}\":t));return u}function T(e,t,n){if(null==e)return e;var r=[],a=0;return N(e,r,\"\",\"\",(function(e){return t.call(n,e,a++)})),r}function z(e){if(-1===e._status){var t=e._result;t=t(),e._status=0,e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}if(1===e._status)return e._result;throw e._result}var P={current:null};function L(){var e=P.current;if(null===e)throw Error(p(321));return e}var R={ReactCurrentDispatcher:P,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:w,IsSomeRendererActing:{current:!1},assign:r};t.Children={map:T,forEach:function(e,t,n){T(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return T(e,(function(){t++})),t},toArray:function(e){return T(e,(function(e){return e}))||[]},only:function(e){if(!_(e))throw Error(p(143));return e}},t.Component=g,t.PureComponent=v,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=R,t.cloneElement=function(e,t,n){if(null===e||void 0===e)throw Error(p(267,e));var o=r({},e.props),l=e.key,i=e.ref,u=e._owner;if(null!=t){if(void 0!==t.ref&&(i=t.ref,u=w.current),void 0!==t.key&&(l=\"\"+t.key),e.type&&e.type.defaultProps)var c=e.type.defaultProps;for(s in t)k.call(t,s)&&!x.hasOwnProperty(s)&&(o[s]=void 0===t[s]&&void 0!==c?c[s]:t[s])}var s=arguments.length-2;if(1===s)o.children=n;else if(1<s){c=Array(s);for(var f=0;f<s;f++)c[f]=arguments[f+2];o.children=c}return{$$typeof:a,type:e.type,key:l,ref:i,props:o,_owner:u}},t.createContext=function(e,t){return void 0===t&&(t=null),(e={$$typeof:i,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:l,_context:e},e.Consumer=e},t.createElement=S,t.createFactory=function(e){var t=S.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:u,render:e}},t.isValidElement=_,t.lazy=function(e){return{$$typeof:s,_payload:{_status:-1,_result:e},_init:z}},t.memo=function(e,t){return{$$typeof:c,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return L().useCallback(e,t)},t.useContext=function(e,t){return L().useContext(e,t)},t.useDebugValue=function(){},t.useEffect=function(e,t){return L().useEffect(e,t)},t.useImperativeHandle=function(e,t,n){return L().useImperativeHandle(e,t,n)},t.useLayoutEffect=function(e,t){return L().useLayoutEffect(e,t)},t.useMemo=function(e,t){return L().useMemo(e,t)},t.useReducer=function(e,t,n){return L().useReducer(e,t,n)},t.useRef=function(e){return L().useRef(e)},t.useState=function(e){return L().useState(e)},t.version=\"17.0.2\"},791:function(e,t,n){e.exports=n(117)},184:function(e,t,n){e.exports=n(374)},813:function(e,t){var n,r,a,o;if(\"object\"===typeof performance&&\"function\"===typeof performance.now){var l=performance;t.unstable_now=function(){return l.now()}}else{var i=Date,u=i.now();t.unstable_now=function(){return i.now()-u}}if(\"undefined\"===typeof window||\"function\"!==typeof MessageChannel){var c=null,s=null,f=function e(){if(null!==c)try{var n=t.unstable_now();c(!0,n),c=null}catch(r){throw setTimeout(e,0),r}};n=function(e){null!==c?setTimeout(n,0,e):(c=e,setTimeout(f,0))},r=function(e,t){s=setTimeout(e,t)},a=function(){clearTimeout(s)},t.unstable_shouldYield=function(){return!1},o=t.unstable_forceFrameRate=function(){}}else{var d=window.setTimeout,p=window.clearTimeout;if(\"undefined\"!==typeof console){var m=window.cancelAnimationFrame;\"function\"!==typeof window.requestAnimationFrame&&console.error(\"This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills\"),\"function\"!==typeof m&&console.error(\"This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills\")}var h=!1,g=null,y=-1,v=5,b=0;t.unstable_shouldYield=function(){return t.unstable_now()>=b},o=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error(\"forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported\"):v=0<e?Math.floor(1e3/e):5};var w=new MessageChannel,k=w.port2;w.port1.onmessage=function(){if(null!==g){var e=t.unstable_now();b=e+v;try{g(!0,e)?k.postMessage(null):(h=!1,g=null)}catch(n){throw k.postMessage(null),n}}else h=!1},n=function(e){g=e,h||(h=!0,k.postMessage(null))},r=function(e,n){y=d((function(){e(t.unstable_now())}),n)},a=function(){p(y),y=-1}}function x(e,t){var n=e.length;e.push(t);e:for(;;){var r=n-1>>>1,a=e[r];if(!(void 0!==a&&0<E(a,t)))break e;e[r]=t,e[n]=a,n=r}}function S(e){return void 0===(e=e[0])?null:e}function _(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var r=0,a=e.length;r<a;){var o=2*(r+1)-1,l=e[o],i=o+1,u=e[i];if(void 0!==l&&0>E(l,n))void 0!==u&&0>E(u,l)?(e[r]=u,e[i]=n,r=i):(e[r]=l,e[o]=n,r=o);else{if(!(void 0!==u&&0>E(u,n)))break e;e[r]=u,e[i]=n,r=i}}}return t}return null}function E(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var C=[],N=[],T=1,z=null,P=3,L=!1,R=!1,O=!1;function j(e){for(var t=S(N);null!==t;){if(null===t.callback)_(N);else{if(!(t.startTime<=e))break;_(N),t.sortIndex=t.expirationTime,x(C,t)}t=S(N)}}function M(e){if(O=!1,j(e),!R)if(null!==S(C))R=!0,n(I);else{var t=S(N);null!==t&&r(M,t.startTime-e)}}function I(e,n){R=!1,O&&(O=!1,a()),L=!0;var o=P;try{for(j(n),z=S(C);null!==z&&(!(z.expirationTime>n)||e&&!t.unstable_shouldYield());){var l=z.callback;if(\"function\"===typeof l){z.callback=null,P=z.priorityLevel;var i=l(z.expirationTime<=n);n=t.unstable_now(),\"function\"===typeof i?z.callback=i:z===S(C)&&_(C),j(n)}else _(C);z=S(C)}if(null!==z)var u=!0;else{var c=S(N);null!==c&&r(M,c.startTime-n),u=!1}return u}finally{z=null,P=o,L=!1}}var F=o;t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){R||L||(R=!0,n(I))},t.unstable_getCurrentPriorityLevel=function(){return P},t.unstable_getFirstCallbackNode=function(){return S(C)},t.unstable_next=function(e){switch(P){case 1:case 2:case 3:var t=3;break;default:t=P}var n=P;P=t;try{return e()}finally{P=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=F,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=P;P=e;try{return t()}finally{P=n}},t.unstable_scheduleCallback=function(e,o,l){var i=t.unstable_now();switch(\"object\"===typeof l&&null!==l?l=\"number\"===typeof(l=l.delay)&&0<l?i+l:i:l=i,e){case 1:var u=-1;break;case 2:u=250;break;case 5:u=1073741823;break;case 4:u=1e4;break;default:u=5e3}return e={id:T++,callback:o,priorityLevel:e,startTime:l,expirationTime:u=l+u,sortIndex:-1},l>i?(e.sortIndex=l,x(N,e),null===S(C)&&e===S(N)&&(O?a():O=!0,r(M,l-i))):(e.sortIndex=u,x(C,e),R||L||(R=!0,n(I))),e},t.unstable_wrapCallback=function(e){var t=P;return function(){var n=P;P=t;try{return e.apply(this,arguments)}finally{P=n}}}},296:function(e,t,n){e.exports=n(813)}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}!function(){var e=n(791),t=n(164);function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:\"undefined\"!==typeof Symbol&&e[Symbol.iterator]||e[\"@@iterator\"];if(null!=n){var r,a,o=[],l=!0,i=!1;try{for(n=n.call(e);!(l=(r=n.next()).done)&&(o.push(r.value),!t||o.length!==t);l=!0);}catch(u){i=!0,a=u}finally{try{l||null==n.return||n.return()}finally{if(i)throw a}}return o}}(e,t)||function(e,t){if(e){if(\"string\"===typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return\"Object\"===n&&e.constructor&&(n=e.constructor.name),\"Map\"===n||\"Set\"===n?Array.from(e):\"Arguments\"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(e,t)||function(){throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\")}()}var o={padding:\"12px 16px\",margin:\"8px 0\",width:\"420px\",maxWidth:\"90vw\",maxHeight:\"75px\",placement:\"bottomRight\"},l={toasts:[],toastLayout:o,updateToastLayout:function(e){return e},updateToasts:function(e){return e},lastUpdateToastId:null,updateLastToastId:function(){return null}},i=e.createContext(l);function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}function c(e){return c=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&\"function\"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?\"symbol\":typeof e},c(e)}var s={sans:'\"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif',mono:\"Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace\",prism:'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\"Liberation Mono\", \"Courier New\", monospace'},f={xs:{min:\"0\",max:\"650px\"},sm:{min:\"650px\",max:\"900px\"},md:{min:\"900px\",max:\"1280px\"},lg:{min:\"1280px\",max:\"1920px\"},xl:{min:\"1920px\",max:\"10000px\"}},d={gap:\"16pt\",gapNegative:\"-16pt\",gapHalf:\"8pt\",gapHalfNegative:\"-8pt\",gapQuarter:\"4pt\",gapQuarterNegative:\"-4pt\",pageMargin:\"16pt\",pageWidth:\"750pt\",pageWidthWithMargin:\"782pt\",breakpointMobile:f.xs.max,breakpointTablet:f.sm.max,radius:\"6px\",unit:\"16px\"},p={type:\"light\",font:s,layout:d,palette:{accents_1:\"#fafafa\",accents_2:\"#eaeaea\",accents_3:\"#999\",accents_4:\"#888\",accents_5:\"#666\",accents_6:\"#444\",accents_7:\"#333\",accents_8:\"#111\",background:\"#fff\",foreground:\"#000\",selection:\"#79ffe1\",secondary:\"#666\",code:\"#f81ce5\",border:\"#eaeaea\",error:\"#e00\",errorLight:\"#ff1a1a\",errorLighter:\"#f7d4d6\",errorDark:\"#c50000\",success:\"#0070f3\",successLight:\"#3291ff\",successLighter:\"#d3e5ff\",successDark:\"#0761d1\",warning:\"#f5a623\",warningLight:\"#f7b955\",warningLighter:\"#ffefcf\",warningDark:\"#ab570a\",cyan:\"#50e3c2\",cyanLighter:\"#aaffec\",cyanLight:\"#79ffe1\",cyanDark:\"#29bc9b\",violet:\"#7928ca\",violetLighter:\"#e3d7fc\",violetLight:\"#8a63d2\",violetDark:\"#4c2889\",purple:\"#f81ce5\",alert:\"#ff0080\",magenta:\"#eb367f\",link:\"#0070f3\"},breakpoints:f,expressiveness:{linkStyle:\"none\",linkHoverStyle:\"none\",dropdownBoxShadow:\"0 4px 4px 0 rgba(0, 0, 0, 0.02)\",scrollerStart:\"rgba(255, 255, 255, 1)\",scrollerEnd:\"rgba(255, 255, 255, 0)\",shadowSmall:\"0 5px 10px rgba(0, 0, 0, 0.12)\",shadowMedium:\"0 8px 30px rgba(0, 0, 0, 0.12)\",shadowLarge:\"0 30px 60px rgba(0, 0, 0, 0.12)\",portalOpacity:.25}},m={type:\"dark\",font:s,layout:d,palette:{accents_1:\"#111\",accents_2:\"#333\",accents_3:\"#444\",accents_4:\"#666\",accents_5:\"#888\",accents_6:\"#999\",accents_7:\"#eaeaea\",accents_8:\"#fafafa\",background:\"#000\",foreground:\"#fff\",selection:\"#f81ce5\",secondary:\"#888\",code:\"#79ffe1\",border:\"#333\",error:\"#e00\",errorLighter:\"#f7d4d6\",errorLight:\"#ff1a1a\",errorDark:\"#c50000\",success:\"#0070f3\",successLighter:\"#d3e5ff\",successLight:\"#3291ff\",successDark:\"#0761d1\",warning:\"#f5a623\",warningLighter:\"#ffefcf\",warningLight:\"#f7b955\",warningDark:\"#ab570a\",cyan:\"#50e3c2\",cyanLighter:\"#aaffec\",cyanLight:\"#79ffe1\",cyanDark:\"#29bc9b\",violet:\"#7928ca\",violetLighter:\"#e3d7fc\",violetLight:\"#8a63d2\",violetDark:\"#4c2889\",purple:\"#f81ce5\",alert:\"#ff0080\",magenta:\"#eb367f\",link:\"#3291ff\"},breakpoints:f,expressiveness:{linkStyle:\"none\",linkHoverStyle:\"none\",dropdownBoxShadow:\"0 0 0 1px #333\",scrollerStart:\"rgba(255, 255, 255, 1)\",scrollerEnd:\"rgba(255, 255, 255, 0)\",shadowSmall:\"0 0 0 1px #333\",shadowMedium:\"0 0 0 1px #333\",shadowLarge:\"0 0 0 1px #333\",portalOpacity:.75}},h=function(e){return e&&\"object\"===c(e)},g=function e(t,n){if(!h(n)||!h(t))return t;for(var r={},a=0,o=Object.keys(t);a<o.length;a++){var l=o[a],i=t[l],c=n[l];Array.isArray(i)&&Array.isArray(c)?r[l]=c.concat(i):h(i)&&h(c)?r[l]=e(i,u({},c)):r[l]=c||i}return r},y=function(){return[p,m]},v=function(e){return!!e&&!y().find((function(t){return t.type===e}))},b=function(e,t){if(!v(t.type))throw new Error(\"Duplicate or unavailable theme type\");return g(e,t)},w={isPresetTheme:function(e){if(!e)return!1;var t=\"string\"===typeof e?e:e.type;return!v(t)},isAvailableThemeType:v,hasUserCustomTheme:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return!!e.find((function(e){return v(e.type)}))},getPresets:y,getPresetStaticTheme:function(){return p},create:b,createFromDark:function(e){return b(m,e)},createFromLight:function(e){return b(p,e)}},k=w,x=k,S=x.getPresetStaticTheme(),_=e.createContext(S),E={themes:k.getPresets()},C=e.createContext(E),N=function(t){var n=t.children,r=t.themeType,o=t.themes,l=void 0===o?[]:o,i=a((0,e.useState)({themes:x.getPresets()}),2),c=i[0],s=i[1],f=(0,e.useMemo)((function(){var e=c.themes.find((function(e){return e.type===r}));return e||x.getPresetStaticTheme()}),[c,r]);return(0,e.useEffect)((function(){null!==l&&void 0!==l&&l.length&&s((function(e){var t=l.filter((function(e){return x.isAvailableThemeType(e.type)}));return u({},e,{themes:x.getPresets().concat(t)})}))}),[l]),e.createElement(C.Provider,{value:c},e.createElement(_.Provider,{value:f},n))},T=function(t){var n=a((0,e.useState)((function(){return\"function\"===typeof t?t():t})),2),r=n[0],o=n[1],l=(0,e.useRef)(t);(0,e.useEffect)((function(){l.current=r}),[r]);return[r,function(e){var t=\"function\"===typeof e?e(l.current):e;l.current=t,o(t)},l]},z={},P={};var L=function(e){for(var t=5381,n=e.length;n;)t=33*t^e.charCodeAt(--n);return t>>>0},R={};!function(e){function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,\"value\"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.__esModule=!0,e.default=void 0;var n=\"undefined\"!==typeof process&&{NODE_ENV:\"production\",PUBLIC_URL:\"\",WDS_SOCKET_HOST:void 0,WDS_SOCKET_PATH:void 0,WDS_SOCKET_PORT:void 0,FAST_REFRESH:!0}&&!0,r=function(e){return\"[object String]\"===Object.prototype.toString.call(e)},a=function(){function e(e){var t=void 0===e?{}:e,a=t.name,l=void 0===a?\"stylesheet\":a,i=t.optimizeForSpeed,u=void 0===i?n:i,c=t.isBrowser,s=void 0===c?\"undefined\"!==typeof window:c;o(r(l),\"`name` must be a string\"),this._name=l,this._deletedRulePlaceholder=\"#\"+l+\"-deleted-rule____{}\",o(\"boolean\"===typeof u,\"`optimizeForSpeed` must be a boolean\"),this._optimizeForSpeed=u,this._isBrowser=s,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var f=this._isBrowser&&document.querySelector('meta[property=\"csp-nonce\"]');this._nonce=f?f.getAttribute(\"content\"):null}var a,l,i,u=e.prototype;return u.setOptimizeForSpeed=function(e){o(\"boolean\"===typeof e,\"`setOptimizeForSpeed` accepts a boolean\"),o(0===this._rulesCount,\"optimizeForSpeed cannot be when rules have already been inserted\"),this.flush(),this._optimizeForSpeed=e,this.inject()},u.isOptimizeForSpeed=function(){return this._optimizeForSpeed},u.inject=function(){var e=this;if(o(!this._injected,\"sheet already injected\"),this._injected=!0,this._isBrowser&&this._optimizeForSpeed)return this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed=\"insertRule\"in this.getSheet(),void(this._optimizeForSpeed||(n||console.warn(\"StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.\"),this.flush(),this._injected=!0));this._serverSheet={cssRules:[],insertRule:function(t,n){return\"number\"===typeof n?e._serverSheet.cssRules[n]={cssText:t}:e._serverSheet.cssRules.push({cssText:t}),n},deleteRule:function(t){e._serverSheet.cssRules[t]=null}}},u.getSheetForTag=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]},u.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},u.insertRule=function(e,t){if(o(r(e),\"`insertRule` accepts only strings\"),!this._isBrowser)return\"number\"!==typeof t&&(t=this._serverSheet.cssRules.length),this._serverSheet.insertRule(e,t),this._rulesCount++;if(this._optimizeForSpeed){var a=this.getSheet();\"number\"!==typeof t&&(t=a.cssRules.length);try{a.insertRule(e,t)}catch(i){return n||console.warn(\"StyleSheet: illegal rule: \\n\\n\"+e+\"\\n\\nSee https://stackoverflow.com/q/20007992 for more info\"),-1}}else{var l=this._tags[t];this._tags.push(this.makeStyleTag(this._name,e,l))}return this._rulesCount++},u.replaceRule=function(e,t){if(this._optimizeForSpeed||!this._isBrowser){var r=this._isBrowser?this.getSheet():this._serverSheet;if(t.trim()||(t=this._deletedRulePlaceholder),!r.cssRules[e])return e;r.deleteRule(e);try{r.insertRule(t,e)}catch(l){n||console.warn(\"StyleSheet: illegal rule: \\n\\n\"+t+\"\\n\\nSee https://stackoverflow.com/q/20007992 for more info\"),r.insertRule(this._deletedRulePlaceholder,e)}}else{var a=this._tags[e];o(a,\"old rule at index `\"+e+\"` not found\"),a.textContent=t}return e},u.deleteRule=function(e){if(this._isBrowser)if(this._optimizeForSpeed)this.replaceRule(e,\"\");else{var t=this._tags[e];o(t,\"rule at index `\"+e+\"` not found\"),t.parentNode.removeChild(t),this._tags[e]=null}else this._serverSheet.deleteRule(e)},u.flush=function(){this._injected=!1,this._rulesCount=0,this._isBrowser?(this._tags.forEach((function(e){return e&&e.parentNode.removeChild(e)})),this._tags=[]):this._serverSheet.cssRules=[]},u.cssRules=function(){var e=this;return this._isBrowser?this._tags.reduce((function(t,n){return n?t=t.concat(Array.prototype.map.call(e.getSheetForTag(n).cssRules,(function(t){return t.cssText===e._deletedRulePlaceholder?null:t}))):t.push(null),t}),[]):this._serverSheet.cssRules},u.makeStyleTag=function(e,t,n){t&&o(r(t),\"makeStyleTag acceps only strings as second parameter\");var a=document.createElement(\"style\");this._nonce&&a.setAttribute(\"nonce\",this._nonce),a.type=\"text/css\",a.setAttribute(\"data-\"+e,\"\"),t&&a.appendChild(document.createTextNode(t));var l=document.head||document.getElementsByTagName(\"head\")[0];return n?l.insertBefore(a,n):l.appendChild(a),a},a=e,(l=[{key:\"length\",get:function(){return this._rulesCount}}])&&t(a.prototype,l),i&&t(a,i),e}();function o(e,t){if(!e)throw new Error(\"StyleSheet: \"+t+\".\")}e.default=a}(R),function(e){e.__esModule=!0,e.default=void 0;var t=r(L),n=r(R);function r(e){return e&&e.__esModule?e:{default:e}}var a=function(){function e(e){var t=void 0===e?{}:e,r=t.styleSheet,a=void 0===r?null:r,o=t.optimizeForSpeed,l=void 0!==o&&o,i=t.isBrowser,u=void 0===i?\"undefined\"!==typeof window:i;this._sheet=a||new n.default({name:\"styled-jsx\",optimizeForSpeed:l}),this._sheet.inject(),a&&\"boolean\"===typeof l&&(this._sheet.setOptimizeForSpeed(l),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._isBrowser=u,this._fromServer=void 0,this._indices={},this._instancesCounts={},this.computeId=this.createComputeId(),this.computeSelector=this.createComputeSelector()}var r=e.prototype;return r.add=function(e){var t=this;void 0===this._optimizeForSpeed&&(this._optimizeForSpeed=Array.isArray(e.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._isBrowser&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce((function(e,t){return e[t]=0,e}),{}));var n=this.getIdAndRules(e),r=n.styleId,a=n.rules;if(r in this._instancesCounts)this._instancesCounts[r]+=1;else{var o=a.map((function(e){return t._sheet.insertRule(e)})).filter((function(e){return-1!==e}));this._indices[r]=o,this._instancesCounts[r]=1}},r.remove=function(e){var t=this,n=this.getIdAndRules(e).styleId;if(function(e,t){if(!e)throw new Error(\"StyleSheetRegistry: \"+t+\".\")}(n in this._instancesCounts,\"styleId: `\"+n+\"` not found\"),this._instancesCounts[n]-=1,this._instancesCounts[n]<1){var r=this._fromServer&&this._fromServer[n];r?(r.parentNode.removeChild(r),delete this._fromServer[n]):(this._indices[n].forEach((function(e){return t._sheet.deleteRule(e)})),delete this._indices[n]),delete this._instancesCounts[n]}},r.update=function(e,t){this.add(t),this.remove(e)},r.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={},this.computeId=this.createComputeId(),this.computeSelector=this.createComputeSelector()},r.cssRules=function(){var e=this,t=this._fromServer?Object.keys(this._fromServer).map((function(t){return[t,e._fromServer[t]]})):[],n=this._sheet.cssRules();return t.concat(Object.keys(this._indices).map((function(t){return[t,e._indices[t].map((function(e){return n[e].cssText})).join(e._optimizeForSpeed?\"\":\"\\n\")]})).filter((function(e){return Boolean(e[1])})))},r.createComputeId=function(){var e={};return function(n,r){if(!r)return\"jsx-\"+n;var a=String(r),o=n+a;return e[o]||(e[o]=\"jsx-\"+(0,t.default)(n+\"-\"+a)),e[o]}},r.createComputeSelector=function(e){void 0===e&&(e=/__jsx-style-dynamic-selector/g);var t={};return function(n,r){this._isBrowser||(r=r.replace(/\\/style/gi,\"\\\\/style\"));var a=n+r;return t[a]||(t[a]=r.replace(e,n)),t[a]}},r.getIdAndRules=function(e){var t=this,n=e.children,r=e.dynamic,a=e.id;if(r){var o=this.computeId(a,r);return{styleId:o,rules:Array.isArray(n)?n.map((function(e){return t.computeSelector(o,e)})):[this.computeSelector(o,n)]}}return{styleId:this.computeId(a),rules:Array.isArray(n)?n:[n]}},r.selectFromServer=function(){return Array.prototype.slice.call(document.querySelectorAll('[id^=\"__jsx-\"]')).reduce((function(e,t){return e[t.id.slice(2)]=t,e}),{})},e}();e.default=a}(P),function(t){t.__esModule=!0,t.default=o,t.flush=function(){var e=a.cssRules();return a.flush(),e};var n,r=e;var a=new((n=P)&&n.__esModule?n:{default:n}).default;function o(e){return\"undefined\"===typeof window?(a.add(e),null):((0,r.useLayoutEffect)((function(){return a.add(e),function(){a.remove(e)}}),[e.id,String(e.dynamic)]),null)}o.dynamic=function(e){return e.map((function(e){var t=e[0],n=e[1];return a.computeId(t,n)})).join(\" \")}}(z);var O=z.default||z;O.flush=z.flush;var j={};!function(t){t.__esModule=!0,t.default=function(e){void 0===e&&(e={});return(0,a.flush)().map((function(t){var n=t[0],a=t[1];return r.default.createElement(\"style\",{id:\"__\"+n,key:\"__\"+n,nonce:e.nonce?e.nonce:void 0,dangerouslySetInnerHTML:{__html:a}})}))},t.flushToHTML=function(e){void 0===e&&(e={});return(0,a.flush)().reduce((function(t,n){var r=n[0],a=n[1];return t+='<style id=\"__'+r+'\"'+(e.nonce?' nonce=\"'+e.nonce+'\"':\"\")+\">\"+a+\"</style>\"}),\"\")};var n,r=(n=e)&&n.__esModule?n:{default:n},a=z.default||z;a.flush=z.flush}(j);var M=j.default||j;M.flushToHTML=j.flushToHTML;var I=O,F=function(){return Math.random().toString(32).slice(2,10)},D=function(){return Boolean(\"undefined\"!==typeof window&&window.document&&window.document.createElement)},A=function(){var t=a((0,e.useState)(!1),2),n=t[0],r=t[1];return(0,e.useEffect)((function(){r(D())}),[]),{isBrowser:n,isServer:!n}},U=function(e){var t=document.createElement(\"div\");return t.setAttribute(\"id\",e),t},B=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:F(),n=arguments.length>1?arguments[1]:void 0,r=\"geist-ui-\".concat(t),o=A(),l=o.isBrowser,i=(0,e.useState)(l?U(r):null),u=a(i,2),c=u[0],s=u[1];return(0,e.useEffect)((function(){var e=(n?n():null)||document.body,t=e.querySelector(\"#\".concat(r)),a=t||U(r);t||e.appendChild(a),s(a)}),[]),c},H=function(){return e.useContext(_)};function V(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var W=[\"children\",\"className\",\"visible\",\"enterTime\",\"leaveTime\",\"clearTime\",\"name\"],$=function(t){var n=t.children,r=t.className,o=t.visible,l=t.enterTime,i=t.leaveTime,c=t.clearTime,s=t.name,f=V(t,W),d=a((0,e.useState)(\"\"),2),p=d[0],m=d[1],h=a((0,e.useState)(o),2),g=h[0],y=h[1];return(0,e.useEffect)((function(){var e=o?\"enter\":\"leave\",t=o?l:i;o&&!g&&y(!0),m(\"\".concat(s,\"-\").concat(e));var n=setTimeout((function(){m(\"\".concat(s,\"-\").concat(e,\" \").concat(s,\"-\").concat(e,\"-active\")),clearTimeout(n)}),t),r=setTimeout((function(){o||(m(\"\"),y(!1)),clearTimeout(r)}),t+c);return function(){clearTimeout(n),clearTimeout(r)}}),[o,g]),e.isValidElement(n)&&g?e.cloneElement(n,u({},f,{className:\"\".concat(n.props.className,\" \").concat(r,\" \").concat(p)})):null};$.defaultProps={visible:!1,enterTime:60,leaveTime:60,clearTime:60,className:\"\",name:\"transition\"},$.displayName=\"GeistCssTransition\";var Q=$,q=[\"width\",\"height\",\"padding\",\"margin\",\"w\",\"h\",\"paddingLeft\",\"paddingRight\",\"paddingTop\",\"paddingBottom\",\"pl\",\"pr\",\"pt\",\"pb\",\"marginLeft\",\"marginRight\",\"marginTop\",\"marginBottom\",\"ml\",\"mr\",\"mt\",\"mb\",\"px\",\"py\",\"mx\",\"my\",\"font\",\"unit\",\"scale\"],K=function(e){return\"\".concat(e)},G={getScaleProps:function(){},getAllScaleProps:function(){return{}},SCALES:{pl:K,pr:K,pb:K,pt:K,px:K,py:K,mb:K,ml:K,mr:K,mt:K,mx:K,my:K,width:K,height:K,font:K},unit:\"16px\"},Y=e.createContext(G),X=function(){return e.useContext(Y)};function Z(e,t){var n=\"undefined\"!==typeof Symbol&&e[Symbol.iterator]||e[\"@@iterator\"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if(\"string\"===typeof e)return J(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);\"Object\"===n&&e.constructor&&(n=e.constructor.name);if(\"Map\"===n||\"Set\"===n)return Array.from(e);if(\"Arguments\"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return J(e,t)}(e))||t&&e&&\"number\"===typeof e.length){n&&(e=n);var r=0,a=function(){};return{s:a,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:a}}throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\")}var o,l=!0,i=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return l=e.done,e},e:function(e){i=!0,o=e},f:function(){try{l||null==n.return||n.return()}finally{if(i)throw o}}}}function J(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var ee=function(e){return function(t){if(!Array.isArray(t))return e[t];var n,r=void 0,a=Z(t);try{for(a.s();!(n=a.n()).done;){var o=n.value,l=e[o];\"undefined\"!==typeof l&&(r=l)}}catch(i){a.e(i)}finally{a.f()}return r}},te=function(e){return function(){var t,n={},r=Z(q);try{for(r.s();!(t=r.n()).done;){var a=t.value,o=e[a];\"undefined\"!==typeof o&&(n[a]=o)}}catch(l){r.e(l)}finally{r.f()}return n}},ne=[\"children\"],re=[\"paddingLeft\",\"pl\",\"paddingRight\",\"pr\",\"paddingTop\",\"pt\",\"paddingBottom\",\"pb\",\"marginTop\",\"mt\",\"marginRight\",\"mr\",\"marginBottom\",\"mb\",\"marginLeft\",\"ml\",\"px\",\"py\",\"mx\",\"my\",\"width\",\"height\",\"font\",\"w\",\"h\",\"margin\",\"padding\",\"unit\",\"scale\"],ae=function(t){var n=(0,e.forwardRef)((function(n,r){var a,o,l,i,c,s,f,d,p,m,h,g,y,v,b,w,k,x,S,_,E,C,N,T,z,P,L,R,O,j,M,I,F=n.children,D=V(n,ne),A=H().layout,U=D.paddingLeft,B=D.pl,W=D.paddingRight,$=D.pr,Q=D.paddingTop,q=D.pt,K=D.paddingBottom,G=D.pb,X=D.marginTop,Z=D.mt,J=D.marginRight,ae=D.mr,oe=D.marginBottom,le=D.mb,ie=D.marginLeft,ue=D.ml,ce=D.px,se=D.py,fe=D.mx,de=D.my,pe=D.width,me=D.height,he=D.font,ge=D.w,ye=D.h,ve=D.margin,be=D.padding,we=D.unit,ke=void 0===we?A.unit:we,xe=D.scale,Se=void 0===xe?1:xe,_e=V(D,re),Ee=function(e){return function(t,n){0===t&&(t=1,n=n||0);var r=function(e){if(1===e)return e;var t=Math.abs((e-1)/2);return e>1?1+t:1-t}(Se)*t;if(\"undefined\"===typeof e)return\"undefined\"!==typeof n?\"\".concat(n):\"calc(\".concat(r,\" * \").concat(ke,\")\");if(!function(e){return void 0!==e&&!Number.isNaN(+e)}(e))return\"\".concat(e);var a=r*Number(e);return\"calc(\".concat(a,\" * \").concat(ke,\")\")}},Ce={unit:ke,SCALES:{pt:Ee(null!==(a=null!==(o=null!==Q&&void 0!==Q?Q:q)&&void 0!==o?o:se)&&void 0!==a?a:be),pr:Ee(null!==(l=null!==(i=null!==W&&void 0!==W?W:$)&&void 0!==i?i:ce)&&void 0!==l?l:be),pb:Ee(null!==(c=null!==(s=null!==K&&void 0!==K?K:G)&&void 0!==s?s:se)&&void 0!==c?c:be),pl:Ee(null!==(f=null!==(d=null!==U&&void 0!==U?U:B)&&void 0!==d?d:ce)&&void 0!==f?f:be),px:Ee(null!==(p=null!==(m=null!==(h=null!==(g=null!==ce&&void 0!==ce?ce:U)&&void 0!==g?g:W)&&void 0!==h?h:B)&&void 0!==m?m:$)&&void 0!==p?p:be),py:Ee(null!==(y=null!==(v=null!==(b=null!==(w=null!==se&&void 0!==se?se:Q)&&void 0!==w?w:K)&&void 0!==b?b:q)&&void 0!==v?v:G)&&void 0!==y?y:be),mt:Ee(null!==(k=null!==(x=null!==X&&void 0!==X?X:Z)&&void 0!==x?x:de)&&void 0!==k?k:ve),mr:Ee(null!==(S=null!==(_=null!==J&&void 0!==J?J:ae)&&void 0!==_?_:fe)&&void 0!==S?S:ve),mb:Ee(null!==(E=null!==(C=null!==oe&&void 0!==oe?oe:le)&&void 0!==C?C:de)&&void 0!==E?E:ve),ml:Ee(null!==(N=null!==(T=null!==ie&&void 0!==ie?ie:ue)&&void 0!==T?T:fe)&&void 0!==N?N:ve),mx:Ee(null!==(z=null!==(P=null!==(L=null!==(R=null!==fe&&void 0!==fe?fe:ie)&&void 0!==R?R:J)&&void 0!==L?L:ue)&&void 0!==P?P:ae)&&void 0!==z?z:ve),my:Ee(null!==(O=null!==(j=null!==(M=null!==(I=null!==de&&void 0!==de?de:X)&&void 0!==I?I:oe)&&void 0!==M?M:Z)&&void 0!==j?j:le)&&void 0!==O?O:ve),width:Ee(null!==pe&&void 0!==pe?pe:ge),height:Ee(null!==me&&void 0!==me?me:ye),font:Ee(he)},getScaleProps:ee(D),getAllScaleProps:te(D)};return e.createElement(Y.Provider,{value:Ce},e.createElement(t,u({},_e,{ref:r}),F))}));return n.displayName=\"Scale\".concat(t.displayName||\"Wrapper\"),n},oe=function(t){var n=t.x,r=t.y,a=t.color,o=t.onCompleted,l=(0,e.useRef)(null),i=Number.isNaN(+r)?0:r-10,u=Number.isNaN(+n)?0:n-10;return(0,e.useEffect)((function(){if(l.current)return l.current.addEventListener(\"animationend\",o),function(){l.current&&l.current.removeEventListener(\"animationend\",o)}})),e.createElement(\"div\",{ref:l,className:\"jsx-3424889537 drip\"},e.createElement(\"svg\",{width:\"20\",height:\"20\",viewBox:\"0 0 20 20\",style:{top:i,left:u},className:\"jsx-3424889537\"},e.createElement(\"g\",{stroke:\"none\",strokeWidth:\"1\",fill:\"none\",fillRule:\"evenodd\",className:\"jsx-3424889537\"},e.createElement(\"g\",{fill:a,className:\"jsx-3424889537\"},e.createElement(\"rect\",{width:\"100%\",height:\"100%\",rx:\"10\",className:\"jsx-3424889537\"})))),e.createElement(I,{id:\"3424889537\"},\".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}\"))};oe.defaultProps={x:0,y:0},oe.displayName=\"GeistButtonDrip\";var le=oe,ie=function(e){for(var t=Object.keys(e),n=t.length,r=\"\",a=0;a<n;a++){var o=t[a];e[t[a]]&&(r=r?\"\".concat(r,\" \").concat(String(o)):String(o))}return r},ue=function(e){return\"object\"===c(e)&&!Array.isArray(e)},ce=function(){var e=arguments.length,t=\"\";if(0===e)return t;for(var n=0;n<e;n++){var r=n<0||arguments.length<=n?void 0:arguments[n];r&&(ue(r)?t+=\" \".concat(ie(r)):t+=\" \".concat(String(r).trim()))}return t.trim()},se=ce,fe=[\"children\",\"type\",\"color\",\"className\",\"spaceRatio\"],de=function(t){var n=t.children,r=t.type,a=t.color,o=t.className,l=t.spaceRatio,i=V(t,fe),c=H(),s=X().SCALES,f=se(\"loading-container\",o),d=(0,e.useMemo)((function(){return function(e,t,n){var r={default:t.accents_6,secondary:t.secondary,success:t.success,warning:t.warning,error:t.error};return n||r[e]}(r,c.palette,a)}),[r,c.palette,a]);return e.createElement(\"div\",u({},i,{className:I.dynamic([[\"2201634259\",[s.font(1),s.width(1,\"100%\"),s.height(1,\"100%\"),s.pt(0),s.pr(0),s.pb(0),s.pl(0),s.mt(0),s.mr(0),s.mb(0),s.ml(0),c.palette.accents_5,d,l]]])+\" \"+(i&&null!=i.className&&i.className||f||\"\")}),e.createElement(\"span\",{className:I.dynamic([[\"2201634259\",[s.font(1),s.width(1,\"100%\"),s.height(1,\"100%\"),s.pt(0),s.pr(0),s.pb(0),s.pl(0),s.mt(0),s.mr(0),s.mb(0),s.ml(0),c.palette.accents_5,d,l]]])+\" loading\"},n&&e.createElement(\"label\",{className:I.dynamic([[\"2201634259\",[s.font(1),s.width(1,\"100%\"),s.height(1,\"100%\"),s.pt(0),s.pr(0),s.pb(0),s.pl(0),s.mt(0),s.mr(0),s.mb(0),s.ml(0),c.palette.accents_5,d,l]]])},n),e.createElement(\"i\",{className:I.dynamic([[\"2201634259\",[s.font(1),s.width(1,\"100%\"),s.height(1,\"100%\"),s.pt(0),s.pr(0),s.pb(0),s.pl(0),s.mt(0),s.mr(0),s.mb(0),s.ml(0),c.palette.accents_5,d,l]]])}),e.createElement(\"i\",{className:I.dynamic([[\"2201634259\",[s.font(1),s.width(1,\"100%\"),s.height(1,\"100%\"),s.pt(0),s.pr(0),s.pb(0),s.pl(0),s.mt(0),s.mr(0),s.mb(0),s.ml(0),c.palette.accents_5,d,l]]])}),e.createElement(\"i\",{className:I.dynamic([[\"2201634259\",[s.font(1),s.width(1,\"100%\"),s.height(1,\"100%\"),s.pt(0),s.pr(0),s.pb(0),s.pl(0),s.mt(0),s.mr(0),s.mb(0),s.ml(0),c.palette.accents_5,d,l]]])})),e.createElement(I,{id:\"2201634259\",dynamic:[s.font(1),s.width(1,\"100%\"),s.height(1,\"100%\"),s.pt(0),s.pr(0),s.pb(0),s.pl(0),s.mt(0),s.mr(0),s.mb(0),s.ml(0),c.palette.accents_5,d,l]},\".loading-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:\".concat(s.font(1),\";width:\").concat(s.width(1,\"100%\"),\";height:\").concat(s.height(1,\"100%\"),\";min-height:1em;padding:\").concat(s.pt(0),\" \").concat(s.pr(0),\" \").concat(s.pb(0),\" \").concat(s.pl(0),\";margin:\").concat(s.mt(0),\" \").concat(s.mr(0),\" \").concat(s.mb(0),\" \").concat(s.ml(0),\";}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:\").concat(c.palette.accents_5,\";line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:\").concat(d,\";margin:0 calc(0.25em / 2 * \").concat(l,\");display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}\")))};de.defaultProps={type:\"default\",className:\"\",spaceRatio:1},de.displayName=\"GeistLoading\";var pe=ae(de),me=function(t){var n=t.color;return e.createElement(\"div\",{className:\"jsx-3416748964 btn-loading\"},e.createElement(pe,{color:n}),e.createElement(I,{id:\"3416748964\"},\".btn-loading.jsx-3416748964{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--geist-ui-button-bg);}\"))};me.displayName=\"GeistButtonLoading\";var he=me,ge=[\"isRight\",\"isSingle\",\"children\",\"className\"],ye=function(t){var n=t.isRight,r=t.isSingle,a=t.children,o=t.className,l=V(t,ge),i=se(\"icon\",{right:n,single:r},o);return e.createElement(\"span\",u({},l,{className:\"jsx-643337184 \"+(l&&null!=l.className&&l.className||i||\"\")}),a,e.createElement(I,{id:\"643337184\"},\".icon.jsx-643337184{position:absolute;left:var(--geist-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--geist-ui-button-color);z-index:1;}.right.jsx-643337184{right:var(--geist-ui-button-icon-padding);left:auto;}.icon.jsx-643337184 svg{background:transparent;height:calc(var(--geist-ui-button-height) / 2.35);width:calc(var(--geist-ui-button-height) / 2.35);}.single.jsx-643337184{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}\"))};ye.defaultProps={isRight:!1,className:\"\"},ye.displayName=\"GeistButtonIcon\";var ve=ye,be={isButtonGroup:!1,disabled:!1},we=e.createContext(be),ke=function(e){if(\"#\"===e.charAt(0))return function(e){var t=e.replace(/^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i,(function(e,t,n,r){return\"\".concat(t).concat(t).concat(n).concat(n).concat(r).concat(r)})),n=/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(t);if(!n)throw new Error(\"Geist UI: Unsupported \".concat(e,\" color.\"));return[Number.parseInt(n[1],16),Number.parseInt(n[2],16),Number.parseInt(n[3],16)]}(e);var t=e.replace(/ /g,\"\"),n=e.substr(0,4),r=t.match(/\\((.+)\\)/);if(!n.startsWith(\"rgb\")||!r)throw console.log(e),new Error('Geist UI: Only support [\"RGB\", \"RGBA\", \"HEX\"] color.');return r[1].split(\",\").map((function(e){return Number.parseFloat(e)}))},xe=function(e,t){if(!/^#|rgb|RGB/.test(e))return e;var n=a(ke(e),3),r=n[0],o=n[1],l=n[2],i=t>1?1:t<0?0:t;return\"rgba(\".concat(r,\", \").concat(o,\", \").concat(l,\", \").concat(i,\")\")},Se=function(e,t){var n=t.type,r=t.disabled,a=t.ghost,o={default:{bg:e.background,border:e.border,color:e.accents_5},secondary:{bg:e.foreground,border:e.foreground,color:e.background},success:{bg:e.success,border:e.success,color:\"#fff\"},warning:{bg:e.warning,border:e.warning,color:\"#fff\"},error:{bg:e.error,border:e.error,color:\"#fff\"},abort:{bg:\"transparent\",border:\"transparent\",color:e.accents_5}};if(r)return{bg:e.accents_1,border:e.accents_2,color:\"#ccc\"};var l=null===n||void 0===n?void 0:n.replace(\"-light\",\"\"),i=o.default;return a?function(e,t){return{secondary:{bg:e.background,border:e.foreground,color:e.foreground},success:{bg:e.background,border:e.success,color:e.success},warning:{bg:e.background,border:e.warning,color:e.warning},error:{bg:e.background,border:e.error,color:e.error}}[t]||null}(e,l)||i:o[l]||i},_e=function(e,t){var n=t.type,r=t.disabled,a=t.loading,o=t.shadow,l=t.ghost,i=Se(e,t),c=xe(i.bg,.85),s={default:{bg:e.background,border:e.foreground},secondary:{bg:e.background,border:e.foreground},success:{bg:e.background,border:e.success},warning:{bg:e.background,border:e.warning},error:{bg:e.background,border:e.error},abort:{bg:\"transparent\",border:\"transparent\",color:e.accents_5},\"secondary-light\":u({},i,{bg:c}),\"success-light\":u({},i,{bg:c}),\"warning-light\":u({},i,{bg:c}),\"error-light\":u({},i,{bg:c})};if(r)return{bg:e.accents_1,border:e.accents_2,color:\"#ccc\"};if(a)return u({},i,{color:\"transparent\"});if(o)return i;var f=(l?function(e,t){return{secondary:{bg:e.foreground,border:e.background,color:e.background},success:{bg:e.success,border:e.background,color:\"white\"},warning:{bg:e.warning,border:e.background,color:\"white\"},error:{bg:e.error,border:e.background,color:\"white\"}}[t.replace(\"-light\",\"\")]||null}(e,n):s[n])||s.default;return u({},f,{color:f.color||f.border})},Ee=[\"children\",\"disabled\",\"type\",\"loading\",\"shadow\",\"ghost\",\"effect\",\"onClick\",\"auto\",\"icon\",\"htmlType\",\"iconRight\",\"className\"],Ce=e.forwardRef((function(t,n){var r=H(),o=X().SCALES,l=(0,e.useRef)(null);(0,e.useImperativeHandle)(n,(function(){return l.current}));var i=a((0,e.useState)(!1),2),c=i[0],s=i[1],f=a((0,e.useState)(0),2),d=f[0],p=f[1],m=a((0,e.useState)(0),2),h=m[0],g=m[1],y=function(e,t){return t.isButtonGroup?u({},e,{auto:!0,shadow:!1,ghost:t.ghost||e.ghost,type:t.type||e.type,disabled:t.disabled||e.disabled}):e}(t,e.useContext(we)),v=y.children,b=y.disabled,w=(y.type,y.loading),k=y.shadow,x=y.ghost,S=y.effect,_=y.onClick,E=y.auto,C=y.icon,N=y.htmlType,T=y.iconRight,z=y.className,P=V(y,Ee),L=(0,e.useMemo)((function(){return Se(r.palette,y)}),[r.palette,y]),R=L.bg,O=L.border,j=L.color,M=(0,e.useMemo)((function(){return _e(r.palette,y)}),[r.palette,y]),F=(0,e.useMemo)((function(){return function(e,t){return e?{cursor:\"not-allowed\",events:\"auto\"}:t?{cursor:\"default\",events:\"none\"}:{cursor:\"pointer\",events:\"auto\"}}(b,w)}),[b,w]),D=F.cursor,A=F.events,U=(0,e.useMemo)((function(){return function(e,t){var n=t.type.endsWith(\"light\"),r=_e(e,t);return xe(n?r.bg:e.accents_2,.65)}(r.palette,y)}),[r.palette,y]),B=(0,e.useMemo)((function(){return function(t,n,r){var a=r.icon,o=r.iconRight,l=a||o,i=Boolean(o),u=t?\"calc(var(--geist-ui-button-height) / 2 + var(--geist-ui-button-icon-padding) * .5)\":0,c=se(\"text\",i?\"right\":\"left\");return l?0===e.Children.count(n)?e.createElement(ve,{isRight:i,isSingle:!0},l):e.createElement(e.Fragment,null,e.createElement(ve,{isRight:i},l),e.createElement(\"div\",{className:I.dynamic([[\"3568181479\",[u,u]]])+\" \"+(c||\"\")},n,e.createElement(I,{id:\"3568181479\",dynamic:[u,u]},\".left.__jsx-style-dynamic-selector{padding-left:\".concat(u,\";}.right.__jsx-style-dynamic-selector{padding-right:\").concat(u,\";}\")))):e.createElement(\"div\",{className:\"text\"},n)}(E,v,{icon:C,iconRight:T})}),[E,v,C,T]),W=E?o.pl(1.15):o.pl(1.375),$=E?o.pr(1.15):o.pr(1.375);return e.createElement(\"button\",u({ref:l,type:N,disabled:b,onClick:function(e){if(!b&&!w){if(!k&&!x&&S&&l.current){var t=l.current.getBoundingClientRect();s(!0),p(e.clientX-t.left),g(e.clientY-t.top)}_&&_(e)}}},P,{className:I.dynamic([[\"86551275\",[o.height(2.5),r.layout.radius,o.font(.875),j,R,O,D,A,k?r.expressiveness.shadowSmall:\"none\",o.pl(.727),o.height(2.5),j,R,E?\"min-content\":o.width(10.5),E?\"auto\":\"initial\",o.height(2.5),o.pt(0),$,o.pb(0),W,o.mt(0),o.mr(0),o.mb(0),o.ml(0),M.color,M.color,M.bg,M.border,D,A,k?r.expressiveness.shadowMedium:\"none\",k?\"-1px\":\"0px\"]]])+\" \"+(P&&null!=P.className&&P.className||se(\"btn\",z)||\"\")}),w&&e.createElement(he,{color:j}),B,c&&e.createElement(le,{x:d,y:h,color:U,onCompleted:function(){s(!1),p(0),g(0)}}),e.createElement(I,{id:\"86551275\",dynamic:[o.height(2.5),r.layout.radius,o.font(.875),j,R,O,D,A,k?r.expressiveness.shadowSmall:\"none\",o.pl(.727),o.height(2.5),j,R,E?\"min-content\":o.width(10.5),E?\"auto\":\"initial\",o.height(2.5),o.pt(0),$,o.pb(0),W,o.mt(0),o.mr(0),o.mb(0),o.ml(0),M.color,M.color,M.bg,M.border,D,A,k?r.expressiveness.shadowMedium:\"none\",k?\"-1px\":\"0px\"]},\".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:\".concat(o.height(2.5),\";border-radius:\").concat(r.layout.radius,\";font-weight:400;font-size:\").concat(o.font(.875),\";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:\").concat(j,\";background-color:\").concat(R,\";border:1px solid \").concat(O,\";cursor:\").concat(D,\";pointer-events:\").concat(A,\";box-shadow:\").concat(k?r.expressiveness.shadowSmall:\"none\",\";--geist-ui-button-icon-padding:\").concat(o.pl(.727),\";--geist-ui-button-height:\").concat(o.height(2.5),\";--geist-ui-button-color:\").concat(j,\";--geist-ui-button-bg:\").concat(R,\";min-width:\").concat(E?\"min-content\":o.width(10.5),\";width:\").concat(E?\"auto\":\"initial\",\";height:\").concat(o.height(2.5),\";padding:\").concat(o.pt(0),\" \").concat($,\" \").concat(o.pb(0),\" \").concat(W,\";margin:\").concat(o.mt(0),\" \").concat(o.mr(0),\" \").concat(o.mb(0),\" \").concat(o.ml(0),\";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:\").concat(M.color,\";--geist-ui-button-color:\").concat(M.color,\";background-color:\").concat(M.bg,\";border-color:\").concat(M.border,\";cursor:\").concat(D,\";pointer-events:\").concat(A,\";box-shadow:\").concat(k?r.expressiveness.shadowMedium:\"none\",\";-webkit-transform:translate3d(0px,\").concat(k?\"-1px\":\"0px\",\",0px);-ms-transform:translate3d(0px,\").concat(k?\"-1px\":\"0px\",\",0px);transform:translate3d(0px,\").concat(k?\"-1px\":\"0px\",\",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}\")))}));Ce.defaultProps={type:\"default\",htmlType:\"button\",ghost:!1,loading:!1,shadow:!1,auto:!1,effect:!0,disabled:!1,className:\"\"},Ce.displayName=\"GeistButton\";var Ne=ae(Ce),Te=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t},ze=(Te(\"default\",\"secondary\",\"success\",\"warning\",\"error\",\"abort\",\"secondary-light\",\"success-light\",\"warning-light\",\"error-light\"),Te(\"default\",\"secondary\",\"success\",\"warning\",\"error\"),Te(\"default\",\"secondary\",\"success\",\"warning\",\"error\",\"dark\",\"lite\"),Te(\"default\",\"secondary\",\"success\",\"warning\",\"error\",\"dark\",\"lite\",\"alert\",\"purple\",\"violet\",\"cyan\"),Te(\"default\",\"silent\",\"prevent\"),Te(\"hover\",\"click\"),Te(\"top\",\"topStart\",\"topEnd\",\"left\",\"leftStart\",\"leftEnd\",\"bottom\",\"bottomStart\",\"bottomEnd\",\"right\",\"rightStart\",\"rightEnd\"),Te(\"start\",\"center\",\"end\",\"left\",\"right\"),function(t,n){return t&&t.length?t.map((function(t,r){return e.createElement(Ne,{auto:!0,scale:1/3,font:\"13px\",type:t.passive?\"default\":\"secondary\",key:\"action-\".concat(r),onClick:function(e){return function(e,t){t&&t(e,n)}(e,t.handler)}},t.name)})):null}),Pe=(Te(\"topLeft\",\"topRight\",\"bottomLeft\",\"bottomRight\"),function(e){return\"\".concat(e).toLowerCase().startsWith(\"top\")}),Le=function(e){return\"\".concat(e).toLowerCase().endsWith(\"left\")},Re=e.memo((function(t){var n=t.toast,r=t.layout,a=H(),o=(0,e.useMemo)((function(){return function(e,t){var n={default:e.background,secondary:e.secondary,success:e.success,warning:e.warning,error:e.error};return t&&\"default\"!==t?{bgColor:n[t],color:\"white\"}:{bgColor:n.default,color:e.foreground}}(a.palette,n.type)}),[a.palette,n.type]),l=o.color,i=o.bgColor,u=\"string\"!==typeof n.text,c=r.padding,s=r.margin,f=r.maxHeight,d=r.maxWidth,p=r.width,m=r.placement,h=(0,e.useMemo)((function(){return function(e){return{enter:{topLeft:\"translate(-60px, -60px)\",topRight:\"translate(60px, -60px)\",bottomLeft:\"translate(-60px, 60px)\",bottomRight:\"translate(60px, 60px)\"}[e],leave:{topLeft:\"translate(-50px, 15px) scale(0.85)\",topRight:\"translate(50px, 15px) scale(0.85)\",bottomLeft:\"translate(-50px, -15px) scale(0.85)\",bottomRight:\"translate(50px, -15px) scale(0.85)\"}[e]}}(m)}),[m]),g=h.enter,y=h.leave;return e.createElement(Q,{name:\"toast\",visible:n.visible,clearTime:350},e.createElement(\"div\",{key:n.id,className:I.dynamic([[\"1407001838\",[p,d,f,a.palette.foreground,i,l,a.layout.radius,a.expressiveness.shadowSmall,a.layout.gapHalf,g,s,c,s,c,y]]])+\" toast\"},u?n.text:e.createElement(e.Fragment,null,e.createElement(\"div\",{className:I.dynamic([[\"1407001838\",[p,d,f,a.palette.foreground,i,l,a.layout.radius,a.expressiveness.shadowSmall,a.layout.gapHalf,g,s,c,s,c,y]]])+\" message\"},n.text),e.createElement(\"div\",{className:I.dynamic([[\"1407001838\",[p,d,f,a.palette.foreground,i,l,a.layout.radius,a.expressiveness.shadowSmall,a.layout.gapHalf,g,s,c,s,c,y]]])+\" action\"},ze(n.actions,n.cancel))),e.createElement(I,{id:\"1407001838\",dynamic:[p,d,f,a.palette.foreground,i,l,a.layout.radius,a.expressiveness.shadowSmall,a.layout.gapHalf,g,s,c,s,c,y]},\".toast.__jsx-style-dynamic-selector{width:\".concat(p,\";max-width:\").concat(d,\";max-height:\").concat(f,\";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:\").concat(a.palette.foreground,\";background-color:\").concat(i,\";color:\").concat(l,\";border:0;border-radius:\").concat(a.layout.radius,\";opacity:1;box-shadow:\").concat(a.expressiveness.shadowSmall,\";-webkit-transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);overflow:hidden;}.message.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;font-size:0.875em;display:-webkit-box;word-break:break-all;padding-right:\").concat(a.layout.gapHalf,\";overflow:hidden;max-height:100%;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1rem;}.toast-enter.__jsx-style-dynamic-selector{opacity:0;height:0;padding:0;margin:0;-webkit-transform:\").concat(g,\";-ms-transform:\").concat(g,\";transform:\").concat(g,\";}.toast-enter-active.__jsx-style-dynamic-selector{opacity:1;height:auto;margin:\").concat(s,\";padding:\").concat(c,\";-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}.toast-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);height:auto;margin:\").concat(s,\";padding:\").concat(c,\";}.toast-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:\").concat(y,\";-ms-transform:\").concat(y,\";transform:\").concat(y,\";}\"))))})),Oe=Re,je=function(){var n=H(),r=B(\"toast\"),o=a(T(!1),3),l=o[1],c=o[2],s=e.useContext(i),f=s.toasts,d=s.updateToasts,p=s.toastLayout,m=s.lastUpdateToastId,h=(0,e.useMemo)((function(){return p}),[p]),g=(0,e.useMemo)((function(){return f.map((function(t){return e.createElement(Oe,{toast:t,layout:h,key:t._internalIdent})}))}),[f,h]),y=(0,e.useMemo)((function(){return se(\"toasts\",{top:Pe(p.placement),left:Le(p.placement)})}),[h]),v=function(e){if(l(e),e)return d((function(e){return e.map((function(e){return e.visible?(e._timeout&&window.clearTimeout(e._timeout),u({},e,{timeout:null})):e}))}));d((function(e){return e.map((function(e,t){return e.visible?(e._timeout&&window.clearTimeout(e._timeout),u({},e,{_timeout:function(){var n=window.setTimeout((function(){e.cancel(),window.clearTimeout(n)}),e.delay+100*t);return n}()})):e}))}))};return(0,e.useEffect)((function(){var e=f.findIndex((function(e){return e._internalIdent===m})),t=f[e];t&&!t.visible&&c.current&&(!f.find((function(t,n){return n<e&&t.visible}))&&c.current&&v(!1))}),[f,m]),(0,e.useEffect)((function(){var e=null,t=window.setInterval((function(){0!==f.length&&(e=window.setTimeout((function(){!f.find((function(e){return e.visible}))&&d((function(){return[]})),e&&clearTimeout(e)}),350))}),5e3);return function(){t&&clearInterval(t),e&&clearTimeout(e)}}),[f]),r&&f&&0!==f.length?(0,t.createPortal)(e.createElement(\"div\",{onMouseEnter:function(){return v(!0)},onMouseLeave:function(){return v(!1)},className:I.dynamic([[\"622610754\",[n.layout.gap,n.layout.gap,n.layout.gap,n.layout.gap]]])+\" \"+(y||\"\")},g,e.createElement(I,{id:\"622610754\",dynamic:[n.layout.gap,n.layout.gap,n.layout.gap,n.layout.gap]},\".toasts.__jsx-style-dynamic-selector{position:fixed;width:auto;max-width:100%;right:\".concat(n.layout.gap,\";bottom:\").concat(n.layout.gap,\";z-index:2000;-webkit-transition:all 400ms ease;transition:all 400ms ease;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.top.__jsx-style-dynamic-selector{bottom:unset;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:\").concat(n.layout.gap,\";}.left.__jsx-style-dynamic-selector{right:unset;left:\").concat(n.layout.gap,\";}\"))),r):null},Me=function(t){var n=t.themes,r=t.themeType,l=t.children,u=a((0,e.useState)(null),2),c=u[0],s=u[1],f=a(T([]),3),d=f[0],p=f[1],m=f[2],h=a(T(o),3),g=h[0],y=h[1],v=h[2],b=function(e){var t=e(m.current);p(t)},w=function(e){var t=e(v.current);y(t)},k=function(e){s(e())},x=(0,e.useMemo)((function(){return{toasts:d,toastLayout:g,updateToasts:b,lastUpdateToastId:c,updateToastLayout:w,updateLastToastId:k}}),[d,g,c]);return e.createElement(i.Provider,{value:x},e.createElement(N,{themes:n,themeType:r},l,e.createElement(je,null)))},Ie=Me,Fe=M.flushToHTML,De=M,Ae=function(t){var n=t.children,r=H();return e.createElement(e.Fragment,null,n,e.createElement(I,{id:\"1357910706\",dynamic:[r.palette.background,r.palette.foreground,r.palette.background,r.font.sans,r.font.sans,r.palette.link,r.expressiveness.linkStyle,r.expressiveness.linkHoverStyle,r.layout.gapHalf,r.layout.gapHalf,r.layout.gapHalf,r.layout.gap,r.palette.foreground,r.palette.accents_4,r.palette.code,r.font.mono,r.layout.gap,r.layout.gap,r.layout.gap,r.palette.accents_2,r.layout.radius,r.font.mono,r.palette.foreground,r.palette.accents_2,r.palette.accents_1,r.layout.gap,r.layout.gap,r.palette.accents_5,r.palette.accents_1,r.layout.radius,r.palette.border,r.palette.selection,r.palette.foreground]},\"html,body{background-color:\".concat(r.palette.background,\";color:\").concat(r.palette.foreground,\";}html{font-size:16px;--geist-icons-background:\").concat(r.palette.background,\";}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:\").concat(r.font.sans,\";}#__next{overflow-x:hidden;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:\").concat(r.font.sans,\";}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:\").concat(r.palette.link,\";-webkit-text-decoration:\").concat(r.expressiveness.linkStyle,\";text-decoration:\").concat(r.expressiveness.linkStyle,\";}a:hover{-webkit-text-decoration:\").concat(r.expressiveness.linkHoverStyle,\";text-decoration:\").concat(r.expressiveness.linkHoverStyle,\";}ul,ol{padding:0;list-style-type:none;margin:\").concat(r.layout.gapHalf,\" \").concat(r.layout.gapHalf,\" \").concat(r.layout.gapHalf,\" \").concat(r.layout.gap,\";color:\").concat(r.palette.foreground,\";}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}ul li:before{content:'\\u2013';display:inline-block;color:\").concat(r.palette.accents_4,\";position:absolute;margin-left:-0.9375em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:\").concat(r.palette.code,\";font-family:\").concat(r.font.mono,\";font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\\\\`';}pre{padding:calc(\").concat(r.layout.gap,\" * 0.9) \").concat(r.layout.gap,\";margin:\").concat(r.layout.gap,\" 0;border:1px solid \").concat(r.palette.accents_2,\";border-radius:\").concat(r.layout.radius,\";font-family:\").concat(r.font.mono,\";white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{color:\").concat(r.palette.foreground,\";font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:\").concat(r.palette.accents_2,\";}details{background-color:\").concat(r.palette.accents_1,\";border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * \").concat(r.layout.gap,\") \").concat(r.layout.gap,\";color:\").concat(r.palette.accents_5,\";background-color:\").concat(r.palette.accents_1,\";border-radius:\").concat(r.layout.radius,\";margin:1.5em 0;border:1px solid \").concat(r.palette.border,\";}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:\").concat(r.palette.selection,\";color:\").concat(r.palette.foreground,\";}\")))},Ue=e.memo(Ae);Ue.flush=De,Ue.flushToHTML=Fe;var Be=Ue,He=[\"className\",\"children\"],Ve=function(t){var n=t.className,r=t.children,a=V(t,He),o=X().SCALES;return e.createElement(\"main\",u({},a,{className:I.dynamic([[\"3887979816\",[o.font(1),o.width(1,\"100%\"),o.height(1,\"100%\"),o.pt(3.125),o.pr(0),o.pb(3.125),o.pl(0),o.mt(0),o.mr(0),o.mb(0),o.ml(0)]]])+\" \"+(a&&null!=a.className&&a.className||n||\"\")}),r,e.createElement(I,{id:\"3887979816\",dynamic:[o.font(1),o.width(1,\"100%\"),o.height(1,\"100%\"),o.pt(3.125),o.pr(0),o.pb(3.125),o.pl(0),o.mt(0),o.mr(0),o.mb(0),o.ml(0)]},\"main.__jsx-style-dynamic-selector{font-size:\".concat(o.font(1),\";width:\").concat(o.width(1,\"100%\"),\";height:\").concat(o.height(1,\"100%\"),\";padding:\").concat(o.pt(3.125),\" \").concat(o.pr(0),\" \").concat(o.pb(3.125),\" \").concat(o.pl(0),\";margin:\").concat(o.mt(0),\" \").concat(o.mr(0),\" \").concat(o.mb(0),\" \").concat(o.ml(0),\";}\")))};Ve.defaultProps={className:\"\"},Ve.displayName=\"GeistPageContent\";var We=ae(Ve),$e=[\"children\",\"render\",\"dotBackdrop\",\"className\",\"dotSize\",\"dotSpace\"],Qe=(Te(\"default\",\"effect\",\"effect-seo\"),function(t){var n=t.dotSpace,r=t.dotSize,a=(0,e.useMemo)((function(){return{position:\"calc(\".concat(n,\" * 25px)\"),size:\"calc(\".concat(n,\" * 50px)\")}}),[n]);return e.createElement(\"span\",{className:I.dynamic([[\"934717826\",[r,r,a.position,a.position,a.size,a.size]]])},e.createElement(I,{id:\"934717826\",dynamic:[r,r,a.position,a.position,a.size,a.size]},\"body{background-image:radial-gradient(#e3e3e3 \".concat(r,\",transparent 0), radial-gradient(#e3e3e3 \").concat(r,\",transparent 0);background-position:0 0,\").concat(a.position,\" \").concat(a.position,\";background-attachment:fixed;background-size:\").concat(a.size,\" \").concat(a.size,\";}\")))}),qe=function(t){var n=t.children,r=t.render,o=t.dotBackdrop,l=t.className,i=t.dotSize,c=t.dotSpace,s=V(t,$e),f=H(),d=X().SCALES,p=(0,e.useMemo)((function(){return\"dark\"!==f.type&&o}),[o,f.type]),m=a((0,e.useState)(\"default\"!==r),2),h=m[0],g=m[1];if((0,e.useEffect)((function(){g(!1)}),[]),h)return\"effect-seo\"===r?e.createElement(\"div\",{\"aria-hidden\":\"true\",className:\"jsx-3942095687 hidden\"},n,e.createElement(I,{id:\"3942095687\"},\".hidden.jsx-3942095687{opacity:0;display:none;}\")):null;var y=function(t,n){return(e.Children.map(t,(function(t){return e.isValidElement(t)?t.type:null}))||[]).includes(n)}(n,We);return e.createElement(\"section\",u({},s,{className:I.dynamic([[\"1515698274\",[d.font(1),d.width(1,\"calc(100% - 100pt)\"),d.height(1,\"auto\"),d.pt(0),d.pr(1.34),d.pb(0),d.pl(1.34),d.mt(0),d.mr(0,\"auto\"),d.mb(0),d.ml(0,\"auto\")]]])+\" \"+(s&&null!=s.className&&s.className||l||\"\")}),y?n:e.createElement(We,null,n),p&&e.createElement(Qe,{dotSize:i,dotSpace:c}),e.createElement(I,{id:\"1515698274\",dynamic:[d.font(1),d.width(1,\"calc(100% - 100pt)\"),d.height(1,\"auto\"),d.pt(0),d.pr(1.34),d.pb(0),d.pl(1.34),d.mt(0),d.mr(0,\"auto\"),d.mb(0),d.ml(0,\"auto\")]},\"section.__jsx-style-dynamic-selector{max-width:100vw;min-height:100vh;box-sizing:border-box;position:relative;font-size:\".concat(d.font(1),\";width:\").concat(d.width(1,\"calc(100% - 100pt)\"),\";height:\").concat(d.height(1,\"auto\"),\";padding:\").concat(d.pt(0),\" \").concat(d.pr(1.34),\" \").concat(d.pb(0),\" \").concat(d.pl(1.34),\";margin:\").concat(d.mt(0),\" \").concat(d.mr(0,\"auto\"),\" \").concat(d.mb(0),\" \").concat(d.ml(0,\"auto\"),\";}\")))};qe.defaultProps={render:\"default\",dotBackdrop:!1,dotSize:\"1px\",dotSpace:1},qe.displayName=\"GeistPage\";var Ke=ae(qe),Ge=[\"children\",\"center\",\"className\"],Ye=function(t){var n=t.children,r=t.center,a=t.className,o=V(t,Ge),l=X().SCALES,i=se({center:r},a);return e.createElement(\"header\",u({},o,{className:I.dynamic([[\"3053482948\",[l.font(1),l.width(1,\"100%\"),l.height(1,\"auto\"),l.pt(0),l.pr(0),l.pb(0),l.pl(0),l.mt(0),l.mr(0),l.mb(0),l.ml(0)]]])+\" \"+(o&&null!=o.className&&o.className||i||\"\")}),n,e.createElement(I,{id:\"3053482948\",dynamic:[l.font(1),l.width(1,\"100%\"),l.height(1,\"auto\"),l.pt(0),l.pr(0),l.pb(0),l.pl(0),l.mt(0),l.mr(0),l.mb(0),l.ml(0)]},\"header.__jsx-style-dynamic-selector{font-size:\".concat(l.font(1),\";width:\").concat(l.width(1,\"100%\"),\";height:\").concat(l.height(1,\"auto\"),\";padding:\").concat(l.pt(0),\" \").concat(l.pr(0),\" \").concat(l.pb(0),\" \").concat(l.pl(0),\";margin:\").concat(l.mt(0),\" \").concat(l.mr(0),\" \").concat(l.mb(0),\" \").concat(l.ml(0),\";}.center.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\")))};Ye.defaultProps={center:!1,className:\"\"},Ye.displayName=\"GeistPageHeader\";var Xe=ae(Ye),Ze=[\"children\"],Je=function(t){var n=t.children,r=V(t,Ze),a=X().SCALES;return e.createElement(\"footer\",u({},r,{className:I.dynamic([[\"3447440073\",[a.font(1),a.width(1,\"100%\"),a.height(1,\"auto\"),a.pt(0),a.pr(0),a.pb(0),a.pl(0),a.mt(0),a.mr(0),a.mb(0),a.ml(0)]]])+\" \"+(r&&null!=r.className&&r.className||\"\")}),n,e.createElement(I,{id:\"3447440073\",dynamic:[a.font(1),a.width(1,\"100%\"),a.height(1,\"auto\"),a.pt(0),a.pr(0),a.pb(0),a.pl(0),a.mt(0),a.mr(0),a.mb(0),a.ml(0)]},\"footer.__jsx-style-dynamic-selector{position:absolute;bottom:0;font-size:\".concat(a.font(1),\";width:\").concat(a.width(1,\"100%\"),\";height:\").concat(a.height(1,\"auto\"),\";padding:\").concat(a.pt(0),\" \").concat(a.pr(0),\" \").concat(a.pb(0),\" \").concat(a.pl(0),\";margin:\").concat(a.mt(0),\" \").concat(a.mr(0),\" \").concat(a.mb(0),\" \").concat(a.ml(0),\";}\")))};Je.defaultProps={className:\"\"},Je.displayName=\"GeistPageFooter\";var et=ae(Je);Ke.Header=Xe,Ke.Content=We,Ke.Body=We,Ke.Footer=et;var tt=Ke,nt=[\"children\",\"tag\",\"className\",\"type\"],rt=function(t){var n=t.children,r=t.tag,a=t.className,o=t.type,l=V(t,nt),i=r,c=H(),s=X(),f=s.SCALES,d=s.getScaleProps,p=d(\"font\"),m=d([\"margin\",\"marginLeft\",\"marginRight\",\"mx\",\"ml\",\"mr\"]),h=d([\"margin\",\"marginTop\",\"marginBottom\",\"my\",\"mt\",\"mb\"]),g=d([\"padding\",\"paddingLeft\",\"paddingRight\",\"pl\",\"pr\",\"px\"]),y=d([\"padding\",\"paddingTop\",\"paddingBottom\",\"pt\",\"pb\",\"py\"]),v=(0,e.useMemo)((function(){return function(e,t){var n={default:\"inherit\",secondary:t.secondary,success:t.success,warning:t.warning,error:t.error};return n[e]||n.default}(o,c.palette)}),[o,c.palette]),b=(0,e.useMemo)((function(){var e=[{value:m,className:\"mx\"},{value:h,className:\"my\"},{value:g,className:\"px\"},{value:y,className:\"py\"},{value:p,className:\"font\"}].reduce((function(e,t){return\"undefined\"===typeof t.value?e:\"\".concat(e,\" \").concat(t.className)}),\"\");return\"\".concat(e,\" \").concat(a).trim()}),[m,h,g,y,p,a]);return e.createElement(i,u({},l,{className:I.dynamic([[\"3155699851\",[r,v,f.width(1,\"auto\"),f.height(1,\"auto\"),f.font(1,\"inherit\"),f.ml(0,\"revert\"),f.mr(0,\"revert\"),f.mt(0,\"revert\"),f.mb(0,\"revert\"),f.pl(0,\"revert\"),f.pr(0,\"revert\"),f.pt(0,\"revert\"),f.pb(0,\"revert\")]]])+\" \"+(l&&null!=l.className&&l.className||b||\"\")}),n,e.createElement(I,{id:\"3155699851\",dynamic:[r,v,f.width(1,\"auto\"),f.height(1,\"auto\"),f.font(1,\"inherit\"),f.ml(0,\"revert\"),f.mr(0,\"revert\"),f.mt(0,\"revert\"),f.mb(0,\"revert\"),f.pl(0,\"revert\"),f.pr(0,\"revert\"),f.pt(0,\"revert\"),f.pb(0,\"revert\")]},\"\".concat(r,\".__jsx-style-dynamic-selector{color:\").concat(v,\";width:\").concat(f.width(1,\"auto\"),\";height:\").concat(f.height(1,\"auto\"),\";}.font.__jsx-style-dynamic-selector{font-size:\").concat(f.font(1,\"inherit\"),\";}.mx.__jsx-style-dynamic-selector{margin-left:\").concat(f.ml(0,\"revert\"),\";margin-right:\").concat(f.mr(0,\"revert\"),\";}.my.__jsx-style-dynamic-selector{margin-top:\").concat(f.mt(0,\"revert\"),\";margin-bottom:\").concat(f.mb(0,\"revert\"),\";}.px.__jsx-style-dynamic-selector{padding-left:\").concat(f.pl(0,\"revert\"),\";padding-right:\").concat(f.pr(0,\"revert\"),\";}.py.__jsx-style-dynamic-selector{padding-top:\").concat(f.pt(0,\"revert\"),\";padding-bottom:\").concat(f.pb(0,\"revert\"),\";}\")))};rt.defaultProps={type:\"default\",className:\"\"},rt.displayName=\"GeistTextChild\";var at=rt,ot=[\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"p\",\"b\",\"small\",\"i\",\"span\",\"del\",\"em\",\"blockquote\",\"children\",\"className\"],lt=function t(n,r){if(!n.length)return r;var a=n.slice(1,n.length);return e.createElement(at,{tag:n[0]},t(a,r))},it=function(t){var n=t.h1,r=t.h2,a=t.h3,o=t.h4,l=t.h5,i=t.h6,c=t.p,s=t.b,f=t.small,d=t.i,p=t.span,m=t.del,h=t.em,g=t.blockquote,y=t.children,v=t.className,b=V(t,ot),w={h1:n,h2:r,h3:a,h4:o,h5:l,h6:i,p:c,blockquote:g},k={span:p,small:f,b:s,em:h,i:d,del:m},x=Object.keys(w).filter((function(e){return w[e]})),S=Object.keys(k).filter((function(e){return k[e]})),_=(0,e.useMemo)((function(){return x[0]?x[0]:S[0]?S[0]:\"p\"}),[x,S]),E=S.filter((function(e){return e!==_})),C=(0,e.useMemo)((function(){return E.length?lt(E,y):y}),[E,y]);return e.createElement(at,u({className:v,tag:_},b),C)};it.defaultProps={h1:!1,h2:!1,h3:!1,h4:!1,h5:!1,h6:!1,p:!1,b:!1,small:!1,i:!1,span:!1,del:!1,em:!1,blockquote:!1,className:\"\",type:\"default\"},it.displayName=\"GeistText\";var ut=ae(it),ct=n(184),st=function(){return(0,ct.jsxs)(tt,{children:[(0,ct.jsx)(ut,{children:\"Hello world.\"}),(0,ct.jsx)(Ne,{children:\"Action\"})]})},ft=function(){return(0,ct.jsxs)(Ie,{children:[(0,ct.jsx)(Be,{}),(0,ct.jsx)(st,{})]})};t.render((0,ct.jsx)(e.StrictMode,{children:(0,ct.jsx)(ft,{})}),document.getElementById(\"app\"))}()}();\n//# sourceMappingURL=main.c0df7028.js.map"
  },
  {
    "path": "examples/tree-shaking-create-react-app/build/static/js/main.c0df7028.js.LICENSE.txt",
    "content": "/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n/** @license React v0.20.2\n * scheduler.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/** @license React v17.0.2\n * react-dom.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/** @license React v17.0.2\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/** @license React v17.0.2\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n"
  },
  {
    "path": "examples/tree-shaking-create-react-app/package.json",
    "content": "{\n  \"name\": \"custom-styles\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"dev\": \"react-scripts start\",\n    \"build\": \"DISABLE_ESLINT_PLUGIN=true react-scripts build\",\n    \"analyze\": \"source-map-explorer 'build/static/js/*.js'\"\n  },\n  \"dependencies\": {\n    \"@geist-ui/core\": \"latest\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^17.0.39\",\n    \"@types/react-dom\": \"^17.0.11\",\n    \"react-scripts\": \"^5.0.0\",\n    \"source-map-explorer\": \"^2.4.2\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "examples/tree-shaking-create-react-app/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>Tree Shaking</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/tree-shaking-create-react-app/src/home.jsx",
    "content": "import React from 'react'\nimport { Page, Text, Button } from '@geist-ui/core'\n\nconst Home = () => (\n  <Page>\n    <Text>Hello world.</Text>\n    <Button>Action</Button>\n  </Page>\n)\n\nexport default Home\n"
  },
  {
    "path": "examples/tree-shaking-create-react-app/src/index.jsx",
    "content": "import React from 'react'\nimport ReactDom from 'react-dom'\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\nimport Home from './home'\n\nconst App = () => {\n  return (\n    <GeistProvider>\n      <CssBaseline />\n      <Home />\n    </GeistProvider>\n  )\n}\n\nReactDom.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('app'),\n)\n\nexport default App\n"
  },
  {
    "path": "examples/tree-shaking-nextjs/README.md",
    "content": "# Tree shaking with Next.js\n\n## About\n\nFull tree-shaking is automatically available without any configuration when using `next.js 11.0.0` or higher. (`webpack > 5.0`)\n\nIn this example, run `yarn analyze` to see the results of the build.\n"
  },
  {
    "path": "examples/tree-shaking-nextjs/next.config.js",
    "content": "const withBundleAnalyzer = require('@next/bundle-analyzer')({\n  enabled: process.env.ANALYZE === 'true',\n})\n\nmodule.exports = withBundleAnalyzer({\n  eslint: {\n    ignoreDuringBuilds: true,\n  },\n})\n"
  },
  {
    "path": "examples/tree-shaking-nextjs/package.json",
    "content": "{\n  \"name\": \"tree-shaking-nextjs\",\n  \"version\": \"0.1.0\",\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"analyze\": \"ANALYZE=true yarn build\"\n  },\n  \"dependencies\": {\n    \"@geist-ui/core\": \"^2.3.3\",\n    \"next\": \"^12.1.0\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\"\n  },\n  \"devDependencies\": {\n    \"@next/bundle-analyzer\": \"^9.4.4\"\n  }\n}\n"
  },
  {
    "path": "examples/tree-shaking-nextjs/pages/_app.js",
    "content": "import { GeistProvider, CssBaseline } from '@geist-ui/core'\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    <GeistProvider>\n      <CssBaseline />\n      <Component {...pageProps} />\n    </GeistProvider>\n  )\n}\nexport default MyApp\n"
  },
  {
    "path": "examples/tree-shaking-nextjs/pages/_document.js",
    "content": "import Document, { Html, Head, Main, NextScript } from 'next/document'\nimport { CssBaseline } from '@geist-ui/core'\n\nclass MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx)\n    const styles = CssBaseline.flush()\n\n    return {\n      ...initialProps,\n      styles: (\n        <>\n          {initialProps.styles}\n          {styles}\n        </>\n      ),\n    }\n  }\n\n  render() {\n    return (\n      <Html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    )\n  }\n}\n\nexport default MyDocument\n"
  },
  {
    "path": "examples/tree-shaking-nextjs/pages/index.js",
    "content": "import { Page, Text, Button } from '@geist-ui/core'\n\nexport default function Home() {\n  return (\n    <Page>\n      <Text h1>\n        Welcome to <a href=\"https://nextjs.org\">Next.js!</a>\n      </Text>\n      <Button>hello</Button>\n    </Page>\n  )\n}\n"
  },
  {
    "path": "examples/tree-shaking-webpack/.babelrc",
    "content": "{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"]\n}\n"
  },
  {
    "path": "examples/tree-shaking-webpack/README.md",
    "content": "## Tree shaking for webpack\n\n### About\n\nFull tree-shaking is automatically available without any configuration when using `webpack 5.0` or higher.\n\n### Previews\n\n**Before:**\n\n![before](tree-shaking-before.png)\n\n<br />\n\n**After:**\n\n![after](tree-shaking-after.png)\n"
  },
  {
    "path": "examples/tree-shaking-webpack/package.json",
    "content": "{\n  \"name\": \"tree-shaking-webpack\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"webpack-dev-server --config ./webpack.config.js --mode development\",\n    \"build\": \"webpack --config ./webpack.config.js --mode production\",\n    \"analyze\": \"source-map-explorer 'dist/*.js' --gzip\"\n  },\n  \"sideEffects\": false,\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.17.5\",\n    \"@babel/preset-env\": \"^7.16.11\",\n    \"@babel/preset-react\": \"^7.16.7\",\n    \"babel-loader\": \"^8.2.3\",\n    \"html-webpack-plugin\": \"^5.5.0\",\n    \"source-map-explorer\": \"^2.5.2\",\n    \"webpack\": \"^5.69.1\",\n    \"webpack-cli\": \"^4.9.2\",\n    \"webpack-dev-server\": \"^4.7.4\"\n  },\n  \"dependencies\": {\n    \"@geist-ui/core\": \"^2.3.3\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\"\n  }\n}\n"
  },
  {
    "path": "examples/tree-shaking-webpack/src/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Tree Shaking</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "examples/tree-shaking-webpack/src/index.js",
    "content": "import React from 'react'\nimport ReactDOM from 'react-dom'\nimport { GeistProvider, CssBaseline, Page, Button } from '@geist-ui/core'\n\nconst App = () => {\n  return (\n    <Page>\n      <p>Hello, world.</p>\n      <Button>Action</Button>\n    </Page>\n  )\n}\n\nReactDOM.render(\n  <React.StrictMode>\n    <GeistProvider>\n      <CssBaseline />\n      <App />\n    </GeistProvider>\n  </React.StrictMode>,\n  document.getElementById('app'),\n)\n"
  },
  {
    "path": "examples/tree-shaking-webpack/webpack.config.js",
    "content": "const path = require('path')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n  entry: './src/index.js',\n\n  devtool: 'source-map',\n\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/,\n        exclude: /node_modules/,\n        use: ['babel-loader'],\n      },\n    ],\n  },\n\n  resolve: {\n    extensions: ['.js', '.jsx'],\n  },\n\n  output: {\n    path: __dirname + '/dist',\n    publicPath: '/',\n    filename: 'bundle.js',\n  },\n\n  plugins: [\n    new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html') }),\n  ],\n  \n  optimization: {\n    usedExports: true,\n  },\n\n  devServer: {\n    host: '127.0.0.1',\n    port: '3000',\n    hot: true,\n    open: true,\n  },\n}\n"
  },
  {
    "path": "examples/with-typescript/README.md",
    "content": "## With TypeScript Example\n\nThis example have been moved here: [geist-ui/react-ts-getting-started](https://github.com/geist-org/react-ts-getting-started)\n"
  },
  {
    "path": "lib/components/attributes/attributes-table.tsx",
    "content": "import { Card, useTheme } from 'components'\nimport React from 'react'\n\nconst AttributesTable: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const theme = useTheme()\n\n  return (\n    <Card className=\"attr\">\n      {children}\n      <style jsx global>{`\n        .attr .pre {\n          margin-top: 12px !important;\n        }\n        .attr table {\n          margin-top: 12px;\n          margin-right: ${theme.layout.gap};\n        }\n        .attr h4.title {\n          margin-top: calc(${theme.layout.gap} * 2.2);\n        }\n        .attr h4.title:first-of-type {\n          margin-top: 0;\n        }\n        .attr table {\n          border-collapse: separate;\n          border-spacing: 0;\n          width: 100%;\n        }\n        .attr thead th td {\n          height: 2.5rem;\n        }\n        .attr tbody tr td {\n          height: 3.333rem;\n        }\n        .attr th,\n        .attr td {\n          padding: 0 0.625rem;\n          text-align: left;\n        }\n        .attr th {\n          height: 2.5rem;\n          color: ${theme.palette.accents_5};\n          font-size: 0.75rem;\n          font-weight: 400;\n          letter-spacing: 0;\n          background: ${theme.palette.accents_1};\n          border-bottom: 1px solid ${theme.palette.border};\n          border-top: 1px solid ${theme.palette.border};\n        }\n        .attr th:nth-child(1) {\n          border-bottom: 1px solid ${theme.palette.border};\n          border-left: 1px solid ${theme.palette.border};\n          border-radius: 4px 0 0 4px;\n          border-top: 1px solid ${theme.palette.border};\n        }\n        .attr th:last-child {\n          border-bottom: 1px solid ${theme.palette.border};\n          border-radius: 0 4px 4px 0;\n          border-right: 1px solid ${theme.palette.border};\n          border-top: 1px solid ${theme.palette.border};\n        }\n        .attr tr td {\n          border-bottom: 1px solid ${theme.palette.border};\n          color: ${theme.palette.accents_6};\n          font-size: 0.875rem;\n          height: 2.5rem;\n        }\n        .attr td:nth-child(1) {\n          border-left: 1px solid transparent;\n        }\n        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {\n          .attr {\n            overflow-x: scroll;\n          }\n          .attr::-webkit-scrollbar {\n            width: 0;\n            height: 0;\n            background-color: transparent;\n          }\n        }\n      `}</style>\n    </Card>\n  )\n}\n\nexport default AttributesTable\n"
  },
  {
    "path": "lib/components/attributes/attributes-title.tsx",
    "content": "import React from 'react'\nimport { VirtualAnchor } from '../pures'\nimport { Code, useTheme } from 'components'\nimport { useConfigs } from 'lib/config-context'\n\nexport interface AttributesTitleProps {\n  alias?: string\n}\n\nconst getAlias = (isChinese: boolean, alias?: string) => {\n  if (!alias) return null\n  return (\n    <small>\n      <span>[</span>\n      {isChinese ? '别名' : 'alias'}: <Code>{alias}</Code>\n      <span>]</span>\n    </small>\n  )\n}\n\nconst AttributesTitle: React.FC<React.PropsWithChildren<AttributesTitleProps>> =\n  React.memo(({ children, alias }) => {\n    const theme = useTheme()\n    const { isChinese } = useConfigs()\n\n    return (\n      <>\n        <h4 className=\"title\">\n          <Code>\n            <VirtualAnchor pure>{children}</VirtualAnchor>\n          </Code>\n          {getAlias(!!isChinese, alias)}\n        </h4>\n\n        <style jsx>{`\n          h4 {\n            display: inline-flex;\n            align-items: center;\n            height: 2rem;\n            padding-left: ${theme.layout.gapQuarter};\n            padding-right: ${theme.layout.gapHalf};\n            background-color: ${theme.palette.accents_1};\n            border-radius: ${theme.layout.radius};\n            margin-bottom: 0;\n          }\n\n          h4 :global(small) {\n            font-size: 0.65em;\n            padding-left: 0.65rem;\n            color: ${theme.palette.accents_4};\n            align-self: flex-end;\n            line-height: 1.6rem;\n          }\n\n          h4 :global(span) {\n            color: ${theme.palette.accents_6};\n          }\n        `}</style>\n      </>\n    )\n  })\n\nexport default AttributesTitle\n"
  },
  {
    "path": "lib/components/attributes/attributes.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { Spacer, Divider, Text } from 'components'\nimport { VirtualAnchor } from '../pures'\nimport { useConfigs } from '../../config-context'\nimport Contributors from './contributors'\nimport AttributesTitle from './attributes-title'\nimport AttributesTable from './attributes-table'\n\nexport interface AttributesProps {\n  edit: string\n}\n\nconst Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(\n  ({ edit, children }) => {\n    const { isChinese } = useConfigs()\n    const path = edit.replace('/pages', 'pages')\n    const apiTitles = useMemo(() => {\n      if (React.Children.count(children) === 0) return null\n      return (\n        <>\n          <Spacer h={1} />\n          <h3>\n            <VirtualAnchor>APIs</VirtualAnchor>\n            {isChinese && ' / 接口文档'}\n          </h3>\n          <AttributesTable>{children}</AttributesTable>\n        </>\n      )\n    }, [children, isChinese])\n\n    return (\n      <>\n        {apiTitles}\n        <Divider font=\"12px\" mt=\"80px\">\n          <Text p b type=\"secondary\" style={{ userSelect: 'none' }}>\n            {isChinese ? '文档贡献者' : 'Contributors'}\n          </Text>\n        </Divider>\n        <Contributors path={path} />\n      </>\n    )\n  },\n)\n\ntype AttributesComponent<P> = React.FC<P> & {\n  Title: typeof AttributesTitle\n  Table: typeof AttributesTable\n}\n\nexport default Attributes as AttributesComponent<AttributesProps>\n"
  },
  {
    "path": "lib/components/attributes/contributors.tsx",
    "content": "import React, { useEffect, useMemo, useState } from 'react'\nimport { Avatar, Link, Tooltip } from 'components'\nimport { useConfigs } from 'lib/config-context'\nimport { CONTRIBUTORS_URL, GITHUB_URL } from 'lib/constants'\nconst RepoMasterURL = `${GITHUB_URL}/blob/master`\n\nexport interface Contributor {\n  name: string\n  avatar: string\n  url: string\n}\n\ninterface Props {\n  path: string\n}\n\nconst getContributors = async (path: string): Promise<Array<Contributor>> => {\n  try {\n    const response = await fetch(`${CONTRIBUTORS_URL}?path=${path}`)\n    if (!response.ok || response.status === 204) return []\n    return response.json()\n  } catch (e) {\n    return []\n  }\n}\n\nconst Contributors: React.FC<Props> = ({ path }) => {\n  const { isChinese } = useConfigs()\n  const [users, setUsers] = useState<Array<Contributor>>([])\n  const link = useMemo(() => `${RepoMasterURL}/${path || '/pages'}`, [])\n\n  useEffect(() => {\n    let unmount = false\n    ;(async () => {\n      const contributors = await getContributors(path)\n      if (unmount) return\n      setUsers(contributors)\n    })()\n    return () => {\n      unmount = true\n    }\n  }, [])\n\n  return (\n    <div className=\"contributors\">\n      {users.map((user, index) => (\n        <Tooltip leaveDelay={0} text={<b>{user.name}</b>} key={`${user.url}-${index}`}>\n          <Link color target=\"_blank\" rel=\"nofollow\" href={user.url}>\n            <Avatar src={user.avatar} />\n          </Link>\n        </Tooltip>\n      ))}\n      <Tooltip\n        leaveDelay={0}\n        text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'}\n        type=\"dark\">\n        <Link color target=\"_blank\" rel=\"nofollow\" href={link}>\n          <Avatar text=\"Add\" />\n        </Link>\n      </Tooltip>\n      <style jsx>{`\n        .contributors {\n          padding-left: 5px;\n          padding-top: 5px;\n          max-width: 100%;\n          height: auto;\n          display: flex;\n          flex-wrap: wrap;\n        }\n\n        .contributors :global(.tooltip) {\n          margin-right: 5px;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Contributors\n"
  },
  {
    "path": "lib/components/attributes/index.ts",
    "content": "import Attributes from './attributes'\nimport AttributesTitle from './attributes-title'\nimport AttributesTable from './attributes-table'\n\nAttributes.Title = AttributesTitle\nAttributes.Table = AttributesTable\n\nexport default Attributes\n"
  },
  {
    "path": "lib/components/customization/codes.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { isObject } from 'components/themes/themes'\nimport { LiveEditor, LiveProvider } from 'react-live'\nimport { useConfigs } from 'lib/config-context'\nimport { CUSTOM_THEME_TYPE } from 'lib/constants'\nimport CopyIcon from 'components/snippet/snippet-icon'\nimport makeCodeTheme from 'lib/components/playground/code-theme'\nimport { Text, Spacer, useTheme, Code, useToasts, Themes, useClipboard } from 'components'\n\nexport const getDeepDifferents = <T,>(source: T, target: T): T => {\n  if (!isObject(target) || !isObject(source)) return target\n\n  const sourceKeys = Object.keys(source) as Array<keyof T>\n  let result = {} as T\n  for (const key of sourceKeys) {\n    const sourceValue = source[key]\n    const targetValue = target[key]\n\n    if (isObject(sourceValue) && isObject(targetValue)) {\n      const childrenDiff = getDeepDifferents(sourceValue, { ...targetValue })\n      if (Object.keys(childrenDiff).length !== 0) {\n        result[key] = childrenDiff\n      }\n    } else if (sourceValue !== targetValue) {\n      result[key] = targetValue\n    }\n  }\n  return result\n}\n\nconst CustomizationCodes: React.FC<unknown> = () => {\n  const DefaultTheme = Themes.getPresetStaticTheme()\n  const theme = useTheme()\n  const { isChinese } = useConfigs()\n  const codeTheme = makeCodeTheme(theme)\n  const { copy } = useClipboard()\n  const { setToast } = useToasts()\n\n  const deepDifferents = useMemo(\n    () => ({\n      ...getDeepDifferents(DefaultTheme, theme),\n      type: CUSTOM_THEME_TYPE,\n    }),\n    [DefaultTheme, theme],\n  )\n  const userCodes = useMemo(() => {\n    return `const myTheme = ${JSON.stringify(deepDifferents, null, 2)}\n\n/***\n *  Usage::\n *\n *  export const App = () => {\n *    return (\n *      <GeistProvider themes={[myTheme]} themeType=\"${CUSTOM_THEME_TYPE}\">\n *        <CssBaseline />\n *        <YourComponent />\n *      </GeistProvider>\n *    )\n *  }\n **/`\n  }, [deepDifferents])\n\n  const copyCode = () => {\n    copy(userCodes)\n    setToast({ text: 'Theme code copied.' })\n  }\n\n  return (\n    <div className=\"custom-codes\">\n      <h3 className=\"title\">{isChinese ? '主题代码' : 'Theme Codes'}</h3>\n      <Spacer h={1} />\n      {isChinese ? (\n        <Text>\n          这里是你所有的变更，点击 <Code>copy</Code> 按钮即可使用在你自己的项目中。\n        </Text>\n      ) : (\n        <Text>\n          This is all your changes, click <Code>copy</Code> to use it in your own project.\n        </Text>\n      )}\n      <Spacer h={2} />\n      <div className=\"codes\">\n        <div className=\"copy\" onClick={copyCode}>\n          <CopyIcon />\n        </div>\n        <LiveProvider code={userCodes} disabled theme={codeTheme}>\n          <LiveEditor />\n        </LiveProvider>\n      </div>\n      <Spacer h={5} />\n      <style jsx>{`\n        .custom-codes {\n          display: flex;\n          flex-direction: column;\n          flex: 1;\n          margin: 3rem auto 2.5rem;\n          text-align: center;\n        }\n\n        .title {\n          text-align: center;\n          width: 80%;\n          margin: 0 auto;\n          display: inline-block;\n          background: ${theme.palette.foreground};\n          color: ${theme.palette.background};\n          font-size: 1rem;\n          line-height: 1rem;\n          padding: ${theme.layout.gap} 0;\n          text-transform: uppercase;\n          letter-spacing: 1.5px;\n        }\n\n        .codes {\n          width: 80%;\n          margin: 0 auto;\n          border: 1px solid ${theme.palette.border};\n          border-radius: ${theme.layout.radius};\n          overflow: hidden;\n          padding: calc(0.6 * ${theme.layout.gap}) ${theme.layout.gap};\n          position: relative;\n        }\n\n        .copy {\n          position: absolute;\n          right: 1rem;\n          top: 1rem;\n          z-index: 2000;\n          color: ${theme.palette.accents_3};\n          cursor: pointer;\n          user-select: none;\n          transition: color 200ms ease;\n          --snippet-font-size: 16px;\n        }\n\n        .copy:hover {\n          color: ${theme.palette.accents_6};\n        }\n\n        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {\n          .title,\n          .codes {\n            width: 90vw;\n          }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default CustomizationCodes\n"
  },
  {
    "path": "lib/components/customization/colors.tsx",
    "content": "import React from 'react'\nimport { Card, Grid, useTheme } from 'components'\nimport { CardTypes } from 'components/utils/prop-types'\n\nconst types = [\n  'secondary',\n  'success',\n  'warning',\n  'error',\n  'dark',\n  'alert',\n  'purple',\n  'violet',\n  'cyan',\n  'lite',\n]\n\nconst Colors: React.FC<React.PropsWithChildren<unknown>> = () => {\n  const theme = useTheme()\n\n  return (\n    <div className=\"colors\">\n      <Grid.Container gap={1} pl={0} mr=\"10px\">\n        {types.map((type, index) => {\n          return (\n            <Grid xs={12} key={`${type}-${index}`}>\n              <Card w=\"100%\" type={type as CardTypes}>\n                {type}\n              </Card>\n            </Grid>\n          )\n        })}\n      </Grid.Container>\n      <style jsx>{`\n        .colors {\n          display: flex;\n          flex-wrap: wrap;\n        }\n\n        .color-card {\n          display: flex;\n          width: 9rem;\n          margin-right: ${theme.layout.gapHalf};\n          margin-bottom: ${theme.layout.gapHalf};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Colors\n"
  },
  {
    "path": "lib/components/customization/demo.tsx",
    "content": "import React from 'react'\nimport Colors from './colors'\nimport { useTheme, Button, Text, Code, Spacer, Link, Select, Grid } from 'components'\nimport { useConfigs } from 'lib/config-context'\n\nconst Demo: React.FC<React.PropsWithChildren<unknown>> = () => {\n  const theme = useTheme()\n  const { isChinese } = useConfigs()\n\n  return (\n    <div className=\"demo\">\n      <div className=\"content\">\n        {isChinese ? (\n          <>\n            <Text h2 mb={0} font=\"13px\" type=\"secondary\">\n              预览\n            </Text>\n            <Text>\n              这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。\n            </Text>\n          </>\n        ) : (\n          <>\n            <Text h2 mb={0} font=\"13px\">\n              PREVIEWS\n            </Text>\n            <Text>\n              Here&#39;s a preview of your changes to the Theme. When you set the changes,\n              the entire document site will change with the theme.\n            </Text>\n          </>\n        )}\n\n        <Spacer h={1.7} />\n        <Text h3 font=\"13px\" type=\"secondary\">\n          {isChinese ? '色彩' : 'COLORS'}\n        </Text>\n        <Colors />\n\n        <Spacer h={1.7} />\n        <Text h3 font=\"13px\" type=\"secondary\">\n          {isChinese ? '排版' : 'Typography'}\n        </Text>\n        <Text>\n          <Link rel=\"nofollow\" href=\"https://en.wikipedia.org/wiki/HTTP/2\" color>\n            HTTP/2\n          </Link>{' '}\n          allows the server to <Code>push</Code> content, that is, to respond with data\n          for more queries than the client requested. This allows the server to supply\n          data it knows a web browser will need to render a web page, without waiting for\n          the browser to examine the first response, and without the overhead of an\n          additional request cycle.\n        </Text>\n        <Text h6>Heading</Text>\n        <Text h5>Heading</Text>\n        <Text h4>Heading</Text>\n        <Text h3>Heading</Text>\n\n        <Spacer h={1.7} />\n        <Text h3 font=\"13px\" type=\"secondary\">\n          {isChinese ? '基础组件' : 'Basic Components'}\n        </Text>\n        <Select width=\"90%\" placeholder=\"Choose one\" initialValue=\"1\">\n          <Select.Option value=\"1\">Option 1</Select.Option>\n          <Select.Option value=\"2\">Option 2</Select.Option>\n        </Select>\n        <Spacer h={1} />\n        <Grid.Container width=\"100%\">\n          <Grid xs={8}>\n            <Button disabled auto>\n              Action\n            </Button>\n          </Grid>\n          <Grid xs={8}>\n            <Button auto>Action</Button>\n          </Grid>\n          <Grid xs={8}>\n            <Button auto type=\"secondary\">\n              Action\n            </Button>\n          </Grid>\n        </Grid.Container>\n      </div>\n      <style jsx>{`\n        .demo {\n          width: 34%;\n          margin-top: calc(${theme.layout.gap} * 2);\n          margin-right: ${theme.layout.gap};\n          padding-right: ${theme.layout.gapQuarter};\n          position: relative;\n          border-right: 1px solid ${theme.palette.border};\n          height: auto;\n          transition: width 200ms ease;\n        }\n\n        .content {\n          width: 100%;\n        }\n\n        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {\n          .demo {\n            display: none;\n          }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Demo\n"
  },
  {
    "path": "lib/components/customization/editor-color-item.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { useTheme, Popover, Themes } from 'components'\nimport { ColorResult, TwitterPicker } from 'react-color'\nimport { useConfigs } from 'lib/config-context'\nimport { GeistUIThemesPalette } from 'components/themes'\nconst DefaultTheme = Themes.getPresetStaticTheme()\n\ninterface Props {\n  value?: string\n  keyName: keyof GeistUIThemesPalette\n}\n\nconst getRandomColor = () => {\n  const hex = `00000${((Math.random() * 0x1000000) << 0).toString(16)}`\n  return `#${hex.substr(-6)}`\n}\n\nconst getRandomColors = () => {\n  const kyes = Object.keys(DefaultTheme.palette) as Array<keyof GeistUIThemesPalette>\n  const basicColors = new Array(5).fill('').map(() => {\n    const index = Math.round(Math.random() * kyes.length) + kyes.length\n    return DefaultTheme.palette[kyes[index]]\n  })\n  const deduplicatedColors = [...new Set(...basicColors)]\n  const randomColors = new Array(10 - deduplicatedColors.length)\n    .fill('')\n    .map(() => getRandomColor())\n  return deduplicatedColors.concat(randomColors)\n}\n\nconst EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({ keyName }) => {\n  const theme = useTheme()\n  const { updateCustomTheme } = useConfigs()\n  const label = `${keyName}`\n  const mainColor = useMemo(() => theme.palette[keyName], [theme.palette, keyName])\n  const randomColors = useMemo(() => getRandomColors(), [])\n  const colorChangeHandler = ({ hex }: ColorResult) => {\n    updateCustomTheme({\n      palette: { [keyName]: hex },\n    })\n  }\n\n  const popoverContent = (color: string) => (\n    <TwitterPicker\n      triangle=\"hide\"\n      color={color}\n      onChangeComplete={colorChangeHandler}\n      colors={randomColors}\n    />\n  )\n  return (\n    <Popover\n      content={() => popoverContent(mainColor)}\n      portalClassName=\"editor-popover\"\n      offset={3}>\n      <div className=\"editor-item\">\n        <div className=\"dot-box\">\n          <span className=\"dot\" />\n        </div>\n        {label}\n        <style jsx>{`\n          .editor-item {\n            background-color: transparent;\n            width: auto;\n            padding: 0 ${theme.layout.gapHalf};\n            line-height: 2rem;\n            display: inline-flex;\n            align-items: center;\n            border: 1px solid ${theme.palette.border};\n            border-radius: ${theme.layout.radius};\n            color: ${theme.palette.accents_5};\n            margin-right: 0.75rem;\n            margin-bottom: 0.5rem;\n            cursor: pointer;\n            transition: color 200ms ease;\n          }\n\n          :global(.editor-popover .inner) {\n            padding: 0 !important;\n          }\n\n          :global(.editor-popover .twitter-picker) {\n            box-shadow: none !important;\n            border: 0 !important;\n            background: transparent !important;\n          }\n\n          .editor-item:hover {\n            color: ${theme.palette.accents_8};\n          }\n\n          .editor-item:hover .dot {\n            transform: scale(1);\n          }\n\n          .dot-box,\n          .dot {\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n          }\n\n          .dot-box {\n            width: 1rem;\n            height: 1rem;\n            margin-right: 0.75rem;\n          }\n\n          .dot {\n            width: 100%;\n            height: 100%;\n            border-radius: 50%;\n            background-color: ${mainColor};\n            transform: scale(0.8);\n            transition: transform 200ms ease;\n          }\n        `}</style>\n      </div>\n    </Popover>\n  )\n}\n\nexport default EditorColorItem\n"
  },
  {
    "path": "lib/components/customization/editor-input-item.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { useTheme, Input, GeistUIThemes } from 'components'\nimport { useConfigs } from 'lib/config-context'\n\ntype Props = {\n  value?: string\n  groupName: keyof GeistUIThemes\n  keyName: string\n}\n\nconst EditorInputItem: React.FC<React.PropsWithChildren<Props>> = ({\n  groupName,\n  keyName,\n}) => {\n  const theme = useTheme()\n  const { updateCustomTheme } = useConfigs()\n  const currentVal = useMemo(() => {\n    const group = theme[groupName]\n    const key = keyName as keyof typeof group\n    return theme[groupName][key]\n  }, [theme.expressiveness, keyName])\n  const width = useMemo(() => (`${currentVal}`.length > 15 ? '350px' : 'auto'), [])\n\n  const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {\n    updateCustomTheme({\n      [groupName]: { [keyName]: event.target.value },\n    })\n  }\n\n  return (\n    <div className=\"editor-item\">\n      <Input\n        value={currentVal as string}\n        label={keyName}\n        onChange={changeHandler}\n        className=\"editor-input\"\n      />\n      <style jsx>{`\n        .editor-item {\n          background-color: transparent;\n          width: auto;\n          padding: 0;\n          line-height: 2rem;\n          display: inline-flex;\n          align-items: center;\n          color: ${theme.palette.accents_5};\n          margin-right: 0.75rem;\n          margin-bottom: 0.5rem;\n          cursor: pointer;\n          transition: color 200ms ease;\n        }\n\n        .editor-item :global(.editor-input) {\n          width: ${width};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default EditorInputItem\n"
  },
  {
    "path": "lib/components/customization/editor.tsx",
    "content": "import React from 'react'\nimport { Text, Button, useTheme, Themes } from 'components'\nimport EditorColorItem from './editor-color-item'\nimport EditorInputItem from './editor-input-item'\nimport RotateCcwIcon from '@geist-ui/icons/rotateCcw'\nimport { useConfigs } from 'lib/config-context'\nimport { GeistUIThemesExpressiveness, GeistUIThemesPalette } from 'components/themes'\n\nconst basicColors: Array<keyof GeistUIThemesPalette> = [\n  'accents_1',\n  'accents_2',\n  'accents_3',\n  'accents_4',\n  'accents_5',\n  'accents_6',\n  'accents_7',\n  'accents_8',\n  'foreground',\n  'background',\n]\nconst statusColors: Array<keyof GeistUIThemesPalette> = [\n  'success',\n  'successLight',\n  'successDark',\n  'error',\n  'errorLight',\n  'errorDark',\n  'warning',\n  'warningLight',\n  'warningDark',\n]\nconst otherColors: Array<keyof GeistUIThemesPalette> = [\n  'selection',\n  'secondary',\n  'link',\n  'border',\n  'code',\n  'cyan',\n  'purple',\n  'alert',\n  'violet',\n]\nconst expressiveness: Array<keyof GeistUIThemesExpressiveness> = [\n  'linkStyle',\n  'linkHoverStyle',\n  'dropdownBoxShadow',\n  'shadowSmall',\n  'shadowMedium',\n  'shadowLarge',\n]\n// const pageLayout: Array<keyof GeistUIThemesLayout> = [\n//   'pageWidth',\n//   'pageWidthWithMargin',\n//   'pageMargin',\n//   'radius',\n// ]\n// const gapLayout: Array<keyof GeistUIThemesLayout> = [\n//   'gap',\n//   'gapNegative',\n//   'gapHalf',\n//   'gapHalfNegative',\n//   'gapQuarter',\n//   'gapQuarterNegative',\n// ]\n\nconst Editor = () => {\n  const theme = useTheme()\n  const DefaultTheme = Themes.getPresetStaticTheme()\n  const { updateCustomTheme, isChinese } = useConfigs()\n\n  // const resetLayout = () => updateCustomTheme({ layout: DefaultTheme.layout })\n  const restColors = () => updateCustomTheme({ palette: DefaultTheme.palette })\n  const resetExpressiveness = () => {\n    updateCustomTheme({ expressiveness: DefaultTheme.expressiveness })\n  }\n\n  return (\n    <div className=\"editor\">\n      <Text h3 mt=\"40px\" font=\"22px\">\n        {isChinese ? '色彩' : 'Colors'}\n        <Button\n          type=\"abort\"\n          icon={<RotateCcwIcon />}\n          auto\n          px={0.65}\n          scale={0.4}\n          ml=\"10px\"\n          onClick={restColors}\n        />\n      </Text>\n      <p className=\"subtitle\">{isChinese ? '基础' : 'basic'}</p>\n      <div className=\"content\">\n        {basicColors.map((item, index) => (\n          <EditorColorItem key={`${item}-${index}`} keyName={item} />\n        ))}\n      </div>\n      <p className=\"subtitle\">{isChinese ? '状态' : 'status'}</p>\n      <div className=\"content\">\n        {statusColors.map((item, index) => (\n          <EditorColorItem key={`${item}-${index}`} keyName={item} />\n        ))}\n      </div>\n      <p className=\"subtitle\">{isChinese ? '其他' : 'others'}</p>\n      <div className=\"content\">\n        {otherColors.map((item, index) => (\n          <EditorColorItem key={`${item}-${index}`} keyName={item} />\n        ))}\n      </div>\n\n      <Text h3 mt=\"40px\">\n        {isChinese ? '表现力' : 'Expressiveness'}\n        <Button\n          type=\"abort\"\n          icon={<RotateCcwIcon />}\n          auto\n          px={0.65}\n          scale={0.4}\n          ml=\"10px\"\n          onClick={resetExpressiveness}\n        />\n      </Text>\n      <p className=\"subtitle\">{isChinese ? '基础' : 'basic'}</p>\n      <div className=\"content\">\n        {expressiveness.map((item, index) => (\n          <EditorInputItem\n            key={`${item}-${index}`}\n            groupName=\"expressiveness\"\n            keyName={item}\n          />\n        ))}\n      </div>\n      <style jsx>{`\n        .content {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n          flex-wrap: wrap;\n          width: auto;\n          margin: 0 auto;\n          padding-left: ${theme.layout.gapQuarter};\n        }\n\n        .subtitle {\n          color: ${theme.palette.accents_4};\n          text-transform: uppercase;\n          font-size: 0.75rem;\n          margin-top: 2rem;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Editor\n"
  },
  {
    "path": "lib/components/customization/layout.tsx",
    "content": "import React from 'react'\nimport { useTheme, Grid } from 'components'\nimport CustomizationCodes from './codes'\nimport Demo from './demo'\n\nconst CustomizationLayout: React.FC<React.PropsWithChildren<unknown>> = ({\n  children,\n}) => {\n  const theme = useTheme()\n\n  return (\n    <div className=\"layout\">\n      <Grid.Container>\n        <Grid xs={24}>\n          <Demo />\n          <div className=\"content\">{children}</div>\n        </Grid>\n        <Grid xs={24}>\n          <CustomizationCodes />\n        </Grid>\n      </Grid.Container>\n\n      <style jsx>{`\n        .layout {\n          min-height: calc(100vh - 108px);\n          max-width: ${theme.layout.pageWidthWithMargin};\n          margin: 0 auto;\n          padding: 0 ${theme.layout.gap};\n          display: flex;\n          flex-direction: column;\n          box-sizing: border-box;\n        }\n\n        .content {\n          flex: 1;\n          overflow: hidden;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default CustomizationLayout\n"
  },
  {
    "path": "lib/components/index.ts",
    "content": "export { default as Layout } from './layout'\nexport { default as Playground } from './playground'\nexport { default as PlaygroundTitle } from './playground/title'\nexport { default as Attributes } from './attributes'\nexport { default as Search } from './search'\nexport * from './mdx-widgets'\n"
  },
  {
    "path": "lib/components/layout/header.tsx",
    "content": "import React, { useMemo } from 'react'\nimport Head from 'next/head'\n\nexport interface Meta {\n  title: string\n}\n\nconst toCapitalize = (name: string) => {\n  const [first, ...rest] = name\n  return `${first.toUpperCase()}${rest.join('')}`\n}\n\nconst PageHeader: React.FC<{ meta: Meta }> = ({ meta }) => {\n  const capitalizeTitle = useMemo(() => {\n    if (!meta.title) return ''\n    if (meta.title.toLowerCase().startsWith('use')) return `${meta.title} - `\n    return `${toCapitalize(meta.title)} - `\n  }, [meta.title])\n  return (\n    <Head>\n      <title>{capitalizeTitle}Geist UI</title>\n    </Head>\n  )\n}\n\nexport default PageHeader\n"
  },
  {
    "path": "lib/components/layout/index.tsx",
    "content": "import { Layout } from './layout'\n\nexport type LayoutComponentType = typeof Layout\nexport type { LayoutProps } from './layout'\nexport default Layout as LayoutComponentType\n"
  },
  {
    "path": "lib/components/layout/layout.tsx",
    "content": "import React from 'react'\nimport PageHeader from './header'\nimport Sidebar from './sidebar'\nimport PoweredBy from './powered-by'\nimport useTheme from 'components/use-theme'\n\nexport interface Meta {\n  title: string\n}\n\nexport interface LayoutProps {\n  meta: Meta\n  getStaticProps?: any\n}\n\nexport const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = React.memo(\n  ({ children, meta }) => {\n    const theme = useTheme()\n\n    return (\n      <div className=\"layout\">\n        <PageHeader meta={meta} />\n        <aside className=\"sidebar\">\n          <div className=\"content\">\n            <Sidebar />\n          </div>\n        </aside>\n        <main className=\"main\">\n          <div>{children}</div>\n          <PoweredBy />\n        </main>\n        <style jsx>{`\n          :global(.layout h3) {\n            margin-top: 40px;\n          }\n          :global(.layout h4) {\n            margin-top: 25px;\n          }\n          :global(.layout ol) {\n            padding-left: 40px;\n            margin: 25px auto;\n            transform: scale(0.95);\n          }\n          .layout {\n            min-height: calc(100vh - 108px);\n            max-width: ${theme.layout.pageWidthWithMargin};\n            margin: 0 auto;\n            padding: 0 ${theme.layout.gap};\n            display: flex;\n            box-sizing: border-box;\n          }\n          .sidebar {\n            flex-grow: 1;\n          }\n          .sidebar > .content {\n            height: calc(100% - 2rem - 96px + var(--geist-page-nav-height));\n            position: fixed;\n            top: 96px;\n            bottom: 2rem;\n\n            width: 200px;\n            margin-right: 20px;\n            -webkit-overflow-scrolling: touch;\n            -webkit-flex-shrink: 0;\n            z-index: 100;\n          }\n          .main {\n            display: flex;\n            max-width: calc(100% - 220px);\n            flex-direction: column;\n            padding-left: 20px;\n            padding-top: 25px;\n            flex: 0 0 100%;\n            padding-bottom: 50px;\n          }\n          @media only screen and (max-width: ${theme.layout.breakpointMobile}) {\n            .layout {\n              max-width: 100%;\n              width: 100%;\n              padding: 20px 1rem;\n            }\n            .sidebar {\n              display: none;\n            }\n            .main {\n              width: 90vw;\n              max-width: 90vw;\n              padding: 0;\n            }\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nexport default Layout\n"
  },
  {
    "path": "lib/components/layout/menu/index.tsx",
    "content": "import dynamic from 'next/dynamic'\nimport MenuSkeleton from './menu-skeleton'\n\nconst Menu = dynamic(import('./menu'), {\n  ssr: false,\n  loading: () => <MenuSkeleton />,\n})\n\nexport default Menu\n"
  },
  {
    "path": "lib/components/layout/menu/menu-mobile.tsx",
    "content": "import React, { useMemo } from 'react'\nimport NextLink from 'next/link'\nimport { useTheme } from 'components'\nimport Metadata from 'lib/data'\nimport useLocale from 'lib/use-locale'\nimport { useConfigs } from 'lib/config-context'\nimport { Sides } from '../sidebar/side-item'\nimport ChevronRightIcon from '@geist-ui/icons/chevronRight'\nimport { useRouter } from 'next/router'\n\ninterface Props {\n  expanded: boolean\n}\n\nconst MenuMobile: React.FC<Props> = ({ expanded }) => {\n  const theme = useTheme()\n  const { pathname } = useRouter()\n  const { isChinese } = useConfigs()\n  const { locale } = useLocale()\n  const menuData = useMemo(() => Metadata[locale], [locale])\n  const [expandedGroupName, setExpandedGroupName] = React.useState<string | null>(null)\n\n  const handleGroupClick = (name: string) => {\n    setExpandedGroupName(expandedGroupName === name ? null : name)\n  }\n\n  if (!expanded) return null\n\n  return (\n    <div className=\"mobile-menu\">\n      <div className=\"content\">\n        <NextLink href={`/${locale}`}>\n          <a className={`menu-item fadein ${pathname === `/${locale}` ? 'active' : ''}`}>\n            {isChinese ? '主页' : 'Home'}\n          </a>\n        </NextLink>\n\n        {menuData.map((group, index) => (\n          <div\n            key={group.name}\n            className=\"fadein\"\n            style={{ animationDelay: `${(index + 1) * 50}ms` }}>\n            <button\n              className={`menu-item ${expandedGroupName === group.name && 'expanded'}`}\n              onClick={() => handleGroupClick(group.name)}>\n              <ChevronRightIcon\n                size=\"1rem\"\n                strokeWidth={2}\n                color={theme.palette.accents_4}\n              />\n              {group.name}\n            </button>\n            {expandedGroupName === group.name && (\n              <div className=\"group\">\n                {(group.children as Array<Sides>).map(section => (\n                  <div key={section.name}>\n                    <span className=\"section-name\">{section.name}</span>\n                    {(section.children as Array<Sides>).map(item => (\n                      <NextLink href={item.url || '/'} key={item.url}>\n                        <a\n                          className={`section-item ${\n                            pathname === item.url ? 'active' : ''\n                          }`}>\n                          {item.name}\n                        </a>\n                      </NextLink>\n                    ))}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n\n      <style jsx>{`\n        .mobile-menu {\n          position: fixed;\n          top: var(--geist-page-nav-height);\n          height: calc(100vh - var(--geist-page-nav-height));\n          width: 100vw;\n          overflow-y: auto;\n          z-index: 999;\n          box-sizing: border-box;\n          background-color: ${theme.palette.background};\n          overflow-y: auto;\n        }\n        .fadein {\n          animation: fadeIn 200ms ease;\n          animation-fill-mode: forwards;\n          opacity: 0;\n        }\n        .menu-item {\n          padding: 0 ${theme.layout.gapHalf};\n          margin: 0 ${theme.layout.gap};\n          height: 48px;\n          width: 100%;\n          display: flex;\n          align-items: center;\n          border: none;\n          background: none;\n          outline: none;\n          border-bottom: 1px solid ${theme.palette.accents_2};\n          text-transform: capitalize;\n          color: ${theme.palette.accents_6};\n          cursor: pointer;\n        }\n        .menu-item :global(svg) {\n          transform: translateX(${theme.layout.gapQuarterNegative});\n          transition: transform 250ms ease;\n        }\n        .menu-item.expanded {\n          border-bottom: none;\n        }\n        .menu-item.expanded :global(svg) {\n          transform: rotate(90deg) translateY(${theme.layout.gapQuarter});\n        }\n        .group {\n          background: ${theme.palette.accents_1};\n          padding: 0 calc(${theme.layout.gap} * 1.5) ${theme.layout.gap};\n          border-top: 1px solid ${theme.palette.accents_2};\n        }\n        .section-name {\n          display: block;\n          font-size: 0.75rem;\n          text-transform: uppercase;\n          color: ${theme.palette.accents_5};\n          margin-top: ${theme.layout.gap};\n          margin-bottom: ${theme.layout.gapHalf};\n        }\n        .section-item {\n          padding: ${theme.layout.gapQuarter} ${theme.layout.gap};\n          margin: 0 ${theme.layout.gapQuarter};\n          width: 100%;\n          display: flex;\n          align-items: center;\n          border: none;\n          background: none;\n          outline: none;\n          color: ${theme.palette.accents_6};\n          border-left: 1px solid ${theme.palette.accents_2};\n        }\n        .active {\n          color: ${theme.palette.link};\n          font-weight: 500;\n        }\n        @keyframes fadeIn {\n          from {\n            transform: translate3d(0, 0.375rem, 0);\n            opacity: 0;\n          }\n          to {\n            transform: translate3d(0, 0, 0);\n            opacity: 1;\n          }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default MenuMobile\n"
  },
  {
    "path": "lib/components/layout/menu/menu-skeleton.tsx",
    "content": "import React from 'react'\nimport useTheme from 'components/use-theme'\n\nconst MenuSkeleton: React.FC<unknown> = () => {\n  const theme = useTheme()\n  return (\n    <div className=\"skeleton\">\n      <style jsx>{`\n        .skeleton {\n          height: var(--geist-page-nav-height);\n          width: 100%;\n          margin: 0 auto;\n          background-color: ${theme.palette.accents_1};\n          border-radius: 10px;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default MenuSkeleton\n"
  },
  {
    "path": "lib/components/layout/menu/menu.tsx",
    "content": "import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useRouter } from 'next/router'\nimport NextLink from 'next/link'\nimport { Controls } from 'lib/components/pures'\nimport { useConfigs } from 'lib/config-context'\nimport { useBodyScroll, useTheme, Button, Image, useMediaQuery, Tabs } from 'components'\nimport { addColorAlpha } from 'components/utils/color'\nimport MenuIcon from '@geist-ui/icons/menu'\nimport MenuMobile from './menu-mobile'\nimport Metadata from 'lib/data'\nimport useLocale from 'lib/use-locale'\n\nconst Menu: React.FC<unknown> = () => {\n  const router = useRouter()\n  const theme = useTheme()\n  const { isChinese } = useConfigs()\n  const { tabbar: currentUrlTabValue, locale } = useLocale()\n  const [expanded, setExpanded] = useState<boolean>(false)\n  const [, setBodyHidden] = useBodyScroll(null, { delayReset: 300 })\n  const isMobile = useMediaQuery('xs', { match: 'down' })\n  const allSides = useMemo(() => Metadata[locale], [locale])\n\n  useEffect(() => {\n    const prefetch = async () => {\n      const urls = isChinese\n        ? ['/zh-cn/guide/introduction', '/zh-cn/components/text', '/zh-cn/customization']\n        : ['/en-us/guide/introduction', '/en-us/components/text', '/en-us/customization']\n      await Promise.all(\n        urls.map(async url => {\n          await router.prefetch(url)\n        }),\n      )\n    }\n    prefetch()\n      .then()\n      .catch(err => console.log(err))\n  }, [isChinese])\n\n  useEffect(() => {\n    setBodyHidden(expanded)\n  }, [expanded])\n\n  useEffect(() => {\n    if (!isMobile) {\n      setExpanded(false)\n    }\n  }, [isMobile])\n\n  useEffect(() => {\n    const handleRouteChange = () => {\n      setExpanded(false)\n    }\n\n    router.events.on('routeChangeComplete', handleRouteChange)\n    return () => router.events.off('routeChangeComplete', handleRouteChange)\n  }, [router.events])\n\n  const handleTabChange = useCallback(\n    (tab: string) => {\n      const shouldRedirectDefaultPage = currentUrlTabValue !== tab\n      if (!shouldRedirectDefaultPage) return\n      const defaultPath = `/${locale}/${tab}`\n      router.push(defaultPath)\n    },\n    [currentUrlTabValue, locale],\n  )\n  const [isLocked, setIsLocked] = useState<boolean>(false)\n\n  useEffect(() => {\n    const handler = () => {\n      const isLocked = document.body.style.overflow === 'hidden'\n      setIsLocked(last => (last !== isLocked ? isLocked : last))\n    }\n    const observer = new MutationObserver(mutations => {\n      mutations.forEach(function (mutation) {\n        if (mutation.type !== 'attributes') return\n        handler()\n      })\n    })\n\n    observer.observe(document.body, {\n      attributes: true,\n    })\n    return () => {\n      observer.disconnect()\n    }\n  }, [])\n\n  return (\n    <>\n      <div className=\"menu-wrapper\">\n        <nav className=\"menu\">\n          <div className=\"content\">\n            <div className=\"logo\">\n              <NextLink href={`/${locale}`}>\n                <a aria-label=\"Go Home\">\n                  <Image\n                    src=\"/images/logo.png\"\n                    width=\"20px\"\n                    height=\"20px\"\n                    mr={0.5}\n                    draggable={false}\n                    title=\"Logo\"\n                  />\n                  Geist\n                </a>\n              </NextLink>\n            </div>\n\n            <div className=\"tabs\">\n              <Tabs\n                value={currentUrlTabValue}\n                leftSpace={0}\n                activeClassName=\"current\"\n                align=\"center\"\n                hideDivider\n                hideBorder\n                onChange={handleTabChange}>\n                <Tabs.Item font=\"14px\" label={isChinese ? '主页' : 'Home'} value=\"\" />\n                {allSides.map((tab, index) => (\n                  <Tabs.Item\n                    font=\"14px\"\n                    label={tab.localeName || tab.name}\n                    value={tab.name}\n                    key={`${tab.localeName || tab.name}-${index}`}\n                  />\n                ))}\n              </Tabs>\n            </div>\n\n            <div className=\"controls\">\n              {isMobile ? (\n                <Button\n                  className=\"menu-toggle\"\n                  auto\n                  type=\"abort\"\n                  onClick={() => setExpanded(!expanded)}>\n                  <MenuIcon size=\"1.125rem\" />\n                </Button>\n              ) : (\n                <Controls />\n              )}\n            </div>\n          </div>\n        </nav>\n      </div>\n      <MenuMobile expanded={expanded} />\n\n      <style jsx>{`\n        .menu-wrapper {\n          height: var(--geist-page-nav-height);\n        }\n        .menu {\n          position: fixed;\n          top: 0;\n          left: 0;\n          right: 0;\n          padding-right: ${isLocked ? 'var(--geist-page-scrollbar-width)' : 0};\n          height: var(--geist-page-nav-height);\n          //width: 100%;\n          backdrop-filter: saturate(180%) blur(5px);\n          background-color: ${addColorAlpha(theme.palette.background, 0.8)};\n          box-shadow: ${theme.type === 'dark'\n            ? '0 0 0 1px #333'\n            : '0 0 15px 0 rgba(0, 0, 0, 0.1)'};\n          z-index: 999;\n        }\n        nav .content {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          max-width: 1000px;\n          height: 100%;\n          margin: 0 auto;\n          user-select: none;\n          padding: 0 ${theme.layout.gap};\n        }\n        .logo {\n          flex: 1 1;\n          display: flex;\n          align-items: center;\n          justify-content: flex-start;\n        }\n        .logo a {\n          display: inline-flex;\n          flex-direction: row;\n          align-items: center;\n          font-size: 1.125rem;\n          font-weight: 500;\n          color: inherit;\n          height: 28px;\n        }\n        .logo :global(.image) {\n          border: 1px solid ${theme.palette.border};\n          border-radius: 2rem;\n        }\n        .tabs {\n          flex: 1 1;\n          padding: 0 ${theme.layout.gap};\n        }\n        .tabs :global(.content) {\n          display: none;\n        }\n        @media only screen and (max-width: ${theme.breakpoints.xs.max}) {\n          .tabs {\n            display: none;\n          }\n        }\n        .controls {\n          flex: 1 1;\n          display: flex;\n          align-items: center;\n          justify-content: flex-end;\n        }\n        .controls :global(.menu-toggle) {\n          display: flex;\n          align-items: center;\n          min-width: 40px;\n          height: 40px;\n          padding: 0;\n        }\n      `}</style>\n    </>\n  )\n}\n\nexport default Menu\n"
  },
  {
    "path": "lib/components/layout/powered-by/index.ts",
    "content": "import dynamic from 'next/dynamic'\n\nconst PoweredBy = dynamic(import('./powered-by'), { ssr: false, loading: () => null })\n\nexport default PoweredBy\n"
  },
  {
    "path": "lib/components/layout/powered-by/powered-by.tsx",
    "content": "import React from 'react'\nimport { Text, Link } from 'components'\n\nconst PoweredBy: React.FC<unknown> = () => {\n  return (\n    <div className=\"powered-by\">\n      <Text mb={0} font=\"14px\" type=\"secondary\">\n        Geist is an open source project from the community.\n      </Text>\n      <Text mt={0} font=\"14px\" type=\"secondary\">\n        And is powered by{' '}\n        <Link color target=\"_blank\" rel=\"noreferrer nofollow\" href=\"/powered-by-netlify\">\n          Netlify\n        </Link>\n        .\n      </Text>\n      <style jsx>{`\n        .powered-by {\n          width: 100%;\n          display: flex;\n          flex-direction: column;\n          align-items: flex-end;\n          margin-top: 30px;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default PoweredBy\n"
  },
  {
    "path": "lib/components/layout/sidebar/active-catalog.tsx",
    "content": "import React from 'react'\nimport { useRouter } from 'next/router'\nimport useTheme from 'components/use-theme'\n\nexport interface Props {\n  name: string\n  localeName?: string\n}\n\nconst ActiveCatalog: React.FC<Props> = React.memo(({ name, localeName, ...props }) => {\n  const theme = useTheme()\n  const { pathname } = useRouter()\n  const isActive = pathname.includes(`/${name}/`)\n\n  return (\n    <span {...props} className={isActive ? 'active' : ''}>\n      {localeName || name}\n      <style jsx>{`\n        span {\n          font-size: 0.8125rem;\n          transition: all 0.2s ease;\n          color: ${theme.palette.accents_4};\n          text-transform: uppercase;\n          letter-spacing: 1.3px;\n        }\n\n        .active {\n          color: ${theme.palette.foreground};\n        }\n      `}</style>\n    </span>\n  )\n})\n\nexport default ActiveCatalog\n"
  },
  {
    "path": "lib/components/layout/sidebar/active-link.tsx",
    "content": "import React, { useMemo } from 'react'\nimport Link from 'next/link'\nimport { useRouter } from 'next/router'\nimport { useTheme } from 'components'\n\nexport interface Props {\n  onAcitve?: () => void\n  href: string\n  text: string\n}\n\nconst ActiveLink: React.FC<Props> = React.memo(({ href, text }) => {\n  const theme = useTheme()\n  const { pathname } = useRouter()\n  const [title, subtitle] = useMemo(() => {\n    if (!/[\\u4E00-\\u9FA5]/.test(text)) return [text, null]\n    if (/zeit|ui|ZEIT|geist|Geist|UI/.test(text)) return [text, null]\n    return [text.replace(/[^\\u4E00-\\u9FA5]/g, ''), text.replace(/[^a-zA-Z]/g, '')]\n  }, [text])\n  const isActive = pathname === href\n\n  return (\n    <>\n      <Link href={href}>\n        <a className={`link ${isActive ? 'active' : ''}`}>\n          {title}\n          {subtitle && <span>&nbsp;{subtitle}</span>}\n        </a>\n      </Link>\n      <style jsx>{`\n        a {\n          font: inherit;\n        }\n\n        .link {\n          display: flex;\n          align-items: baseline;\n          font-size: 1rem;\n          color: ${theme.palette.accents_6};\n          padding: calc(${theme.layout.unit} * 0.375) 0;\n          transition: all 200ms ease;\n        }\n\n        span {\n          font-size: 0.75rem;\n          color: ${theme.palette.accents_4};\n          font-weight: 400;\n        }\n\n        .link.active {\n          color: ${theme.palette.success};\n          font-weight: 600;\n        }\n\n        .link.active span {\n          color: ${theme.palette.successLight};\n        }\n      `}</style>\n    </>\n  )\n})\n\nexport default ActiveLink\n"
  },
  {
    "path": "lib/components/layout/sidebar/index.tsx",
    "content": "import dynamic from 'next/dynamic'\nimport SidebarSkeleton from './sidebar-skeleton'\n\nconst Sidebar = dynamic(import('./sidebar'), {\n  ssr: false,\n  loading: () => <SidebarSkeleton />,\n})\n\nexport default Sidebar\n"
  },
  {
    "path": "lib/components/layout/sidebar/side-item.tsx",
    "content": "import React, { ReactElement } from 'react'\nimport ActiveLink from './active-link'\nimport ActiveCatalog from './active-catalog'\n\nexport type Sides = {\n  name: string\n  url?: string\n  localeName?: string\n  children?: Sides | Array<Sides>\n}\n\nexport interface SideItemProps {\n  sides: Array<Sides>\n}\n\nconst SideItem: React.FC<React.PropsWithChildren<SideItemProps>> = React.memo(\n  ({ children, sides }) => {\n    return (\n      <>\n        {sides.map((side, index) => {\n          const showChildren = side.children && children\n          return (\n            <div key={`${side.localeName || side.name}-${index}`} className=\"item\">\n              {!side.url && (\n                <ActiveCatalog name={side.name} localeName={side.localeName} />\n              )}\n              {side.url && <ActiveLink href={side.url} text={side.name} />}\n\n              {showChildren && (\n                <div className=\"children\">\n                  {React.cloneElement(children as ReactElement, {\n                    sides: side.children,\n                  })}\n                </div>\n              )}\n            </div>\n          )\n        })}\n        <style jsx>{`\n          .item {\n            width: 100%;\n          }\n\n          .children {\n            display: flex;\n            justify-content: center;\n            align-items: flex-start;\n            flex-direction: column;\n            transition: all 0.2s ease-in-out;\n            position: relative;\n            margin-top: 0.5rem;\n          }\n\n          .active-title {\n            font-weight: bold;\n          }\n        `}</style>\n      </>\n    )\n  },\n)\n\nexport default SideItem\n"
  },
  {
    "path": "lib/components/layout/sidebar/sidebar-skeleton.tsx",
    "content": "import React, { useEffect, useState } from 'react'\nimport useTheme from 'components/use-theme'\n\nconst DEFAULT_OPACITY = 0.75\nconst LOADING_OPACITY = 0.45\n\nconst SidebarSkeleton: React.FC<unknown> = () => {\n  const theme = useTheme()\n  const [opacity, setOpacity] = useState(DEFAULT_OPACITY)\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setOpacity(opacity =>\n        opacity !== DEFAULT_OPACITY ? DEFAULT_OPACITY : LOADING_OPACITY,\n      )\n    }, 600)\n    return () => {\n      window.clearTimeout(timer)\n    }\n  }, [])\n  return (\n    <div className=\"skeleton\">\n      <div className=\"item\" style={{ width: '50%' }} />\n      <div className=\"item\" style={{ width: '65%' }} />\n      <div className=\"item\" style={{ width: '75%' }} />\n      <div className=\"item\" style={{ width: '75%' }} />\n      <div className=\"space\" />\n      <div className=\"item\" style={{ width: '50%' }} />\n      <div className=\"item\" style={{ width: '65%' }} />\n      <div className=\"item\" />\n      <div className=\"item\" />\n      <div className=\"item\" />\n      <style jsx>{`\n        .skeleton {\n          width: 100%;\n        }\n        .item {\n          width: 100%;\n          height: 20px;\n          border-radius: 6px;\n          margin: 8px 0;\n          background-color: ${theme.palette.accents_2};\n          opacity: ${opacity};\n          transition: opacity 350ms linear;\n        }\n        .space {\n          margin: 40px 0;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default SidebarSkeleton\n"
  },
  {
    "path": "lib/components/layout/sidebar/sidebar.tsx",
    "content": "import React, { useEffect, useMemo, useRef } from 'react'\nimport Router from 'next/router'\nimport { useTheme, Spacer } from 'components'\nimport SideItem, { Sides } from './side-item'\nimport useLocale from 'lib/use-locale'\nimport { useConfigs } from 'lib/config-context'\nimport Metadata from 'lib/data'\n\nexport interface Props {}\n\nexport type SideChildren = Sides | Array<Sides>\n\nexport const SideGroup: React.FC<{ sides?: SideChildren }> = React.memo(({ sides }) => {\n  if (!sides) return null\n  sides = Array.isArray(sides) ? sides : [sides]\n  return (\n    <SideItem sides={sides}>\n      <SideGroup />\n    </SideItem>\n  )\n})\n\nexport const Sidebar: React.FC<Props> = React.memo(() => {\n  const theme = useTheme()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const { sidebarScrollHeight, updateSidebarScrollHeight } = useConfigs()\n  const { locale, tabbar } = useLocale()\n\n  const tabbarData = useMemo(() => {\n    const allSides = Metadata[locale]\n    const currentSide = allSides.find(side => side.name === tabbar)\n    return (currentSide?.children || []) as Array<Sides>\n  }, [locale, tabbar])\n\n  useEffect(() => {\n    Router.events.on('routeChangeStart', () => {\n      if (!boxRef.current) return\n      updateSidebarScrollHeight(boxRef.current.scrollTop || 0)\n    })\n  }, [])\n\n  useEffect(() => {\n    if (!boxRef.current) return\n    boxRef.current.scrollTo({ top: sidebarScrollHeight })\n  }, [boxRef.current])\n\n  return (\n    <div ref={boxRef} className=\"sides box\">\n      <SideItem sides={tabbarData}>\n        <SideGroup />\n      </SideItem>\n      <Spacer />\n      <style jsx>{`\n        .sides {\n          width: 100%;\n          padding-bottom: ${theme.layout.gap};\n        }\n        .box {\n          overflow-y: auto;\n          overflow-x: hidden;\n          height: 100%;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n        }\n        .box::-webkit-scrollbar {\n          width: 0;\n          background-color: transparent;\n        }\n        .box > :global(.item) {\n          margin-bottom: ${theme.layout.gap};\n        }\n      `}</style>\n    </div>\n  )\n})\n\nexport default Sidebar\n"
  },
  {
    "path": "lib/components/mdx-widgets/README.md",
    "content": "## MDX Widgets\n\nThese components are used as examples for mdx files, please do not refer to this content for other components in the `lib` folder.\n"
  },
  {
    "path": "lib/components/mdx-widgets/colors/colors-data.ts",
    "content": "import { GeistUIThemesPalette } from 'components/themes/presets'\n\nexport type ColorEnum = {\n  [key in keyof GeistUIThemesPalette]?: string\n}\n\nconst normal: ColorEnum = {\n  background: 'Background',\n  accents_1: 'Accent 1',\n  accents_2: 'Accent 2',\n  accents_3: 'Accent 3',\n  accents_4: 'Accent 4',\n  accents_5: 'Accent 5',\n  accents_6: 'Accent 6',\n  accents_7: 'Accent 7',\n  accents_8: 'Accent 8',\n  foreground: 'Foreground',\n}\n\nconst error: ColorEnum = {\n  errorLighter: 'Lighter',\n  errorLight: 'Light',\n  error: 'Default',\n  errorDark: 'Dark',\n}\n\nconst success: ColorEnum = {\n  successLighter: 'Lighter',\n  successLight: 'Light',\n  success: 'Default',\n  successDark: 'Dark',\n}\n\nconst warning: ColorEnum = {\n  warningLighter: 'Lighter',\n  warningLight: 'Light',\n  warning: 'Default',\n  warningDark: 'Dark',\n}\n\nconst violet: ColorEnum = {\n  violetLighter: 'Lighter',\n  violetLight: 'Light',\n  violet: 'Default',\n  violetDark: 'Dark',\n}\n\nconst cyan: ColorEnum = {\n  cyanLighter: 'Lighter',\n  cyanLight: 'Light',\n  cyan: 'Default',\n  cyanDark: 'Dark',\n}\n\nconst highlight: ColorEnum = {\n  alert: 'Alert',\n  purple: 'Purple',\n  magenta: 'Magenta',\n}\n\nconst colorsData: { [key: string]: ColorEnum } = {\n  normal,\n  success,\n  warning,\n  error,\n  violet,\n  cyan,\n  highlight,\n}\n\nexport const getColorData = (type: string): ColorEnum => {\n  const data = colorsData[type]\n  return data || (colorsData.normal as ColorEnum)\n}\n\nexport const getCurrentColor = (\n  palette: GeistUIThemesPalette,\n  type: string,\n  index: number,\n): string => {\n  if (type === 'normal') {\n    if (index >= 5) return palette.background\n    return palette.foreground\n  }\n\n  if (type === 'highlight') {\n    if (index < 3) return 'white'\n    return 'black'\n  }\n\n  if (type === 'warning' || type === 'cyan') {\n    if (index < 3) return 'black'\n    return 'white'\n  }\n\n  if (Object.keys(colorsData[type]).find(key => key.endsWith('Lighter'))) {\n    if (index === 0) return 'black'\n    return 'white'\n  }\n\n  return palette.background\n}\n"
  },
  {
    "path": "lib/components/mdx-widgets/colors/index.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { useTheme, useToasts, Code, Grid, useClipboard } from 'components'\nimport { getColorData, getCurrentColor } from './colors-data'\nimport { GeistUIThemesPalette } from 'components/themes'\n\ninterface Props {\n  type: string\n}\n\nconst getColorItem = (\n  type: string,\n  palette: GeistUIThemesPalette,\n  copy: (text: string) => void,\n) => {\n  const data = getColorData(type)\n  const getColor = (index: number) => getCurrentColor(palette, type, index)\n  const keys = Object.keys(data)\n\n  return (keys as Array<keyof GeistUIThemesPalette>).map((key, index) => (\n    <div className=\"color\" key={`color-item-${index}`}>\n      <Grid.Container justify=\"space-between\" style={{ height: '4.5rem' }}>\n        <Grid.Container alignItems=\"center\" sm={8} xs={16}>\n          <h4>{data[key]}</h4>\n        </Grid.Container>\n        <Grid.Container alignItems=\"center\" justify=\"center\" sm={8} xs={0}>\n          <span className=\"usage\" onClick={() => copy(`theme.palette.${key}`)}>\n            theme.palette.{key}\n          </span>\n        </Grid.Container>\n        <Grid.Container alignItems=\"center\" justify=\"flex-end\" sm={8} xs>\n          <span className=\"value\" onClick={() => copy(palette[key])}>\n            {palette[key]}\n          </span>\n        </Grid.Container>\n      </Grid.Container>\n      <style jsx>{`\n        .color {\n          background-color: ${palette[key]};\n          color: ${getColor(index)};\n        }\n      `}</style>\n    </div>\n  ))\n}\n\nconst Colors: React.FC<Props> = ({ type }) => {\n  const theme = useTheme()\n  const { copy } = useClipboard()\n  const { setToast } = useToasts()\n  const copyText = (text: string) => {\n    copy(text)\n    setToast({\n      text: (\n        <span>\n          Copied <Code>{text}</Code>\n        </span>\n      ),\n    })\n  }\n  const colorItems = useMemo(\n    () => getColorItem(type, theme.palette, copyText),\n    [type, theme.palette],\n  )\n\n  return (\n    <div className=\"colors\">\n      {colorItems}\n      <style jsx>{`\n        .colors {\n          display: flex;\n          flex-direction: column;\n          width: 100%;\n        }\n        .colors :global(.color) {\n          padding: ${theme.layout.gap};\n          position: relative;\n          user-select: none;\n        }\n        .colors :global(.color:first-child) {\n          border-top-left-radius: ${theme.layout.radius};\n          border-top-right-radius: ${theme.layout.radius};\n        }\n        .colors :global(.color:last-child) {\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n        }\n        .colors :global(.color h4) {\n          margin: 0;\n        }\n        .colors :global(.usage) {\n          font-size: 1rem;\n          padding: 1rem;\n          cursor: pointer;\n        }\n        .colors :global(.value) {\n          font-size: 0.875rem;\n          text-transform: uppercase;\n          padding: 1rem;\n          cursor: pointer;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Colors\n"
  },
  {
    "path": "lib/components/mdx-widgets/example-block.tsx",
    "content": "import React, { useMemo } from 'react'\nimport useTheme from 'components/use-theme'\nimport { GeistUIThemes } from 'components/themes/presets'\n\nconst defaultProps = {\n  plain: false,\n}\n\nexport type ExampleBlockProps = {\n  plain?: number | boolean\n}\n\nconst getBackground = (theme: GeistUIThemes, plain: number | boolean) => {\n  if (typeof plain !== 'number') return theme.palette.success\n\n  const colors = [\n    theme.palette.accents_1,\n    theme.palette.accents_2,\n    theme.palette.accents_3,\n    theme.palette.accents_4,\n    theme.palette.accents_5,\n    theme.palette.accents_6,\n  ]\n  return colors[plain - 1] || theme.palette.success\n}\n\nconst ExampleBlock: React.FC<React.PropsWithChildren<ExampleBlockProps>> = React.memo(\n  ({\n    plain,\n    children,\n    ...props\n  }: React.PropsWithChildren<ExampleBlockProps> & typeof defaultProps) => {\n    const theme = useTheme()\n    const bg = useMemo(() => getBackground(theme, plain), [theme, plain])\n\n    return (\n      <div className=\"block\" {...props}>\n        {children}\n        <style jsx>{`\n          .block {\n            width: 100%;\n            background: ${bg};\n            padding: ${theme.layout.gapHalf};\n            border-radius: ${theme.layout.radius};\n            color: ${theme.palette.background};\n            font-size: 0.75rem;\n          }\n        `}</style>\n      </div>\n    )\n  },\n)\n\nExampleBlock.defaultProps = defaultProps\nExampleBlock.displayName = 'GeistExampleBlock'\nexport default ExampleBlock\n"
  },
  {
    "path": "lib/components/mdx-widgets/grid-demo.tsx",
    "content": "import React from 'react'\nimport { useTheme } from 'components'\nimport { addColorAlpha } from 'components/utils/color'\n\nconst GridDemo: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  const theme = useTheme()\n  const bgColor = addColorAlpha(theme.palette.accents_2, 0.5)\n  return (\n    <div className=\"grid-demo\">\n      {children}\n      <style jsx>{`\n        .grid-demo {\n          background: transparent;\n          background-image: linear-gradient(${bgColor} 1px, transparent 0),\n            linear-gradient(90deg, ${bgColor} 1px, transparent 0);\n          background-size: 15px 15px, 15px 15px, 75px 75px, 75px 75px;\n          border: 2px solid ${bgColor};\n          border-radius: 4px;\n          overflow: hidden;\n          width: 500px;\n          height: 150px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          margin-bottom: 15px;\n        }\n        .grid-demo :global(> *) {\n          margin-bottom: 15px;\n        }\n        .grid-demo :global(> *:last-of-type) {\n          margin-bottom: 0;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default GridDemo\n"
  },
  {
    "path": "lib/components/mdx-widgets/home-cell.tsx",
    "content": "import React from 'react'\nimport { Card, Link, useTheme } from 'components'\nimport NextLink from 'next/link'\n\nexport type HomeCellProps = {\n  url: string\n  title: string\n  desc: string\n  icon: React.ReactNode\n}\n\nconst HomeCell: React.FC<HomeCellProps> = ({ url, title, desc, icon }) => {\n  const theme = useTheme()\n  return (\n    <NextLink href={url} passHref>\n      <Link>\n        <Card padding=\"5px\" shadow width=\"100%\">\n          <h4 className=\"feature__title\">\n            <div className=\"feature__icon\">{icon}</div>\n            {title}\n          </h4>\n          <p className=\"feature__description\">{desc}</p>\n        </Card>\n        <style jsx>{`\n          .feature__title {\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n          }\n          .feature__icon {\n            height: 2.5rem;\n            width: 2.5rem;\n            padding: 0.625rem;\n            margin-right: ${theme.layout.gapHalf};\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: linear-gradient(#3291ff, #0761d1);\n            color: #fff;\n            border-radius: 2rem;\n          }\n          .feature__icon :global(svg) {\n            width: 100%;\n            height: 100%;\n          }\n          .feature__description {\n            color: ${theme.palette.accents_6};\n          }\n        `}</style>\n      </Link>\n    </NextLink>\n  )\n}\n\nexport default HomeCell\n"
  },
  {
    "path": "lib/components/mdx-widgets/hybrid-code.tsx",
    "content": "import React, { ReactNode, useMemo } from 'react'\nimport { Code, CodeProps } from 'components'\n\nexport type HybridCodeProps = CodeProps\nexport const FILE_NAME_PREFIX = '// NAME:'\ntype HybridCodeChildrenAndName = {\n  children: ReactNode | undefined\n  name?: string | undefined\n}\n\nconst extractFileName = (\n  children: ReactNode | undefined,\n  stopDeep: boolean = false,\n): HybridCodeChildrenAndName => {\n  if (!children) return { children }\n  let name: string | undefined = undefined\n  const next = React.Children.map(children, child => {\n    if (name) return child\n    if (!React.isValidElement(child)) return null\n    const grandson = child.props?.children\n    if (typeof grandson === 'string' && grandson?.startsWith(FILE_NAME_PREFIX)) {\n      name = grandson\n      return null\n    }\n    if (!Array.isArray(grandson) || stopDeep) return child\n\n    const { children: puredGrandson, name: puredName } = extractFileName(\n      child.props?.children,\n      true,\n    )\n    if (!puredName) return child\n\n    name = puredName\n    const withoutSpaceAndNull = React.Children.toArray(puredGrandson).filter(\n      (r, index) => {\n        if (index === 0 && r === '\\n') return false\n        return !!r\n      },\n    )\n    return React.cloneElement(child, {\n      children: withoutSpaceAndNull,\n    })\n  })\n  return {\n    children: next,\n    name,\n  }\n}\n\nconst HybridCode: React.FC<HybridCodeProps> = ({ children }) => {\n  const { children: withoutNameChildren, name } = useMemo<HybridCodeChildrenAndName>(\n    () => extractFileName(children),\n    [children],\n  )\n  const withoutPrefixName = useMemo(() => {\n    if (!name) return name\n    return name.replace(FILE_NAME_PREFIX, '')\n  }, [name])\n\n  return (\n    <Code block name={withoutPrefixName}>\n      {withoutNameChildren}\n    </Code>\n  )\n}\n\nexport default HybridCode\n"
  },
  {
    "path": "lib/components/mdx-widgets/hybrid-link.tsx",
    "content": "import React from 'react'\nimport NextLink from 'next/link'\nimport { Link, LinkProps } from 'components'\nimport { useRouter } from 'next/router'\n\nexport type HybridLinkProps = LinkProps\n\nconst HybridLink: React.FC<HybridLinkProps> = ({ href = '#', children, ...props }) => {\n  const isRelativeUrl = !/^([a-z0-9]*:|.{0})\\/\\/.*$/gim.test(href)\n  const { pathname } = useRouter()\n  const isHomePage = pathname.includes('guide/introduction')\n\n  if (isRelativeUrl) {\n    return (\n      <NextLink href={href} passHref>\n        <Link color block {...props}>\n          {children}\n        </Link>\n      </NextLink>\n    )\n  }\n\n  return (\n    <Link\n      href={href}\n      target=\"_blank\"\n      color\n      icon={!isHomePage}\n      rel=\"noreferrer nofollow\"\n      {...props}>\n      {children}\n    </Link>\n  )\n}\n\nexport default HybridLink\n"
  },
  {
    "path": "lib/components/mdx-widgets/icons-gallery/icons-cell.tsx",
    "content": "import React from 'react'\nimport { Text, useTheme } from 'components'\n\nexport const getFileName = (name: string): string => {\n  return name.replace(/^(.)/, g => g.toLowerCase())\n}\n\nexport const getImportString = (name: string) => {\n  const fileName = getFileName(name)\n  const single = `import ${name} from '@geist-ui/icons/${fileName}'`\n  const normal = `import { ${name} } from '@geist-ui/icons'`\n  return {\n    single,\n    normal,\n  }\n}\n\ninterface Props {\n  component: React.ComponentType<any>\n  name: string\n  onClick: (name: string) => void\n}\n\nconst IconsCell: React.FC<Props> = ({ component: Component, name, onClick }) => {\n  const theme = useTheme()\n  return (\n    <div className=\"icon-item\" key={name} onClick={() => onClick(name)}>\n      <Component />\n      <Text type=\"secondary\" small>\n        {name}\n      </Text>\n      <style jsx>{`\n        .icon-item {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: space-evenly;\n          flex-grow: 0;\n          flex-basis: 125px;\n          min-width: 0px;\n          height: 95px;\n          margin: 12px 5px;\n          border-radius: ${theme.layout.radius};\n          box-sizing: border-box;\n          cursor: pointer;\n          user-select: none;\n          transition: all 150ms ease-in-out;\n        }\n\n        .icon-item > :global(small) {\n          display: inline-block;\n          width: 90%;\n          text-align: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        .icon-item:hover {\n          box-shadow: ${theme.expressiveness.shadowMedium};\n        }\n\n        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {\n          .icon-item {\n            flex-basis: 30%;\n          }\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default React.memo(IconsCell)\n"
  },
  {
    "path": "lib/components/mdx-widgets/icons-gallery/icons-gallery.tsx",
    "content": "import React, { useState } from 'react'\nimport { Card, Input, useInput, Modal, useModal, Snippet } from 'components'\nimport * as Icons from '@geist-ui/icons'\nimport IconsCell, { getImportString } from './icons-cell'\nimport { useConfigs } from 'lib/config-context'\n\nconst ImportSnippet: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {\n  return (\n    <Snippet>\n      {children}\n      <style jsx>{`\n        :global(pre:before) {\n          display: none;\n        }\n      `}</style>\n    </Snippet>\n  )\n}\n\nconst IconsGallery: React.FC<unknown> = () => {\n  const { isChinese } = useConfigs()\n  const { setVisible, bindings: modalBindings } = useModal()\n  const { state: query, bindings } = useInput('')\n  const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })\n  const icons = Object.entries(Icons).filter(\n    ([name]) => !query || name.toLowerCase().includes(query.toLowerCase()),\n  )\n  const onCellClick = (name: string) => {\n    const { single, normal } = getImportString(name)\n    setImportStr({ title: name, single, normal })\n    setVisible(true)\n  }\n\n  return (\n    <>\n      <h3 className=\"title\">{isChinese ? '图标画廊' : 'Icons Gallery'}</h3>\n      <Card>\n        <Input\n          width=\"100%\"\n          icon={<Icons.Search />}\n          placeholder={isChinese ? '搜索' : 'Search'}\n          {...bindings}\n        />\n        <div className=\"icons-grid\">\n          {icons.map(([name, component], index) => (\n            <IconsCell\n              name={name}\n              component={component}\n              key={`${name}-${index}`}\n              onClick={onCellClick}\n            />\n          ))}\n        </div>\n        <Modal {...modalBindings}>\n          <Modal.Title>{importStr.title}</Modal.Title>\n          <Modal.Content>\n            <p>{isChinese ? '引入:' : 'Import:'}</p>\n            <ImportSnippet>{importStr.normal}</ImportSnippet>\n            <p>{isChinese ? '引入单个组件:' : 'Import single component:'}</p>\n            <ImportSnippet>{importStr.single}</ImportSnippet>\n          </Modal.Content>\n        </Modal>\n      </Card>\n      <style jsx>{`\n        .title {\n          line-height: 1;\n          margin-top: 75px;\n          margin-bottom: 30px;\n        }\n\n        :global(input) {\n          margin-bottom: 4px !important;\n        }\n\n        .icons-grid {\n          display: flex;\n          flex-wrap: wrap;\n          margin-top: 8pt;\n          justify-content: space-around;\n        }\n      `}</style>\n    </>\n  )\n}\n\nexport default IconsGallery\n"
  },
  {
    "path": "lib/components/mdx-widgets/icons-gallery/index.tsx",
    "content": "import dynamic from 'next/dynamic'\n\nconst IconsGallery = dynamic(() => import('./icons-gallery'), {\n  ssr: false,\n  loading: () => null,\n})\n\nexport default IconsGallery\n"
  },
  {
    "path": "lib/components/mdx-widgets/index.ts",
    "content": "export { default as HybridLink } from './hybrid-link'\nexport { default as HybridCode } from './hybrid-code'\nexport { default as MockPage } from './mock-page'\nexport { default as Colors } from './colors'\nexport { default as HomeCell } from './home-cell'\nexport { default as IconsGallery } from './icons-gallery'\nexport { default as ExampleBlock } from './example-block'\nexport { default as GridDemo } from './grid-demo'\nexport * as ParsedCodes from './parsed-codes'\n"
  },
  {
    "path": "lib/components/mdx-widgets/mock-page.tsx",
    "content": "import React, { useEffect, useState } from 'react'\nimport { useTheme } from 'components'\n\ninterface Props {\n  visible: boolean\n  onClose?: () => void\n}\n\nconst MockPage: React.FC<React.PropsWithChildren<Props>> = ({\n  visible: customVisible,\n  onClose,\n  children,\n}) => {\n  const theme = useTheme()\n  const [visible, setVisible] = useState<boolean>(false)\n\n  useEffect(() => {\n    if (customVisible !== undefined) {\n      setVisible(customVisible)\n    }\n  }, [customVisible])\n\n  const clickHandler = () => {\n    setVisible(false)\n    onClose && onClose()\n  }\n  return (\n    <section onClick={clickHandler} className={visible ? 'active' : ''}>\n      {children}\n      <style jsx>{`\n        section {\n          position: fixed;\n          width: 100vw;\n          height: 100vh;\n          background-color: ${theme.palette.background};\n          z-index: 5000;\n          top: -5000px;\n          left: -5000px;\n          display: none;\n        }\n\n        .active {\n          top: 0;\n          left: 0;\n          bottom: 0;\n          display: block;\n        }\n      `}</style>\n    </section>\n  )\n}\n\nexport default MockPage\n"
  },
  {
    "path": "lib/components/mdx-widgets/parsed-codes/clock.tsx",
    "content": "import React from 'react'\n\nexport const __html = `\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">Clock</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword control-flow\">return</span> <span class=\"token punctuation\">(</span>\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">\n        </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">Hello, world!</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">\n        </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h2</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">It is </span><span class=\"token punctuation\">{</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token property-access\">props</span><span class=\"token punctuation\">.</span><span class=\"token property-access\">date</span><span class=\"token punctuation\">.</span><span class=\"token method function property-access\">toLocaleTimeString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">.</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h2</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">\n      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n    <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n`.trim()\n\nexport const Clock: React.FC<unknown> = () => (\n  <code className=\"language-jsx\" dangerouslySetInnerHTML={{ __html }} />\n)\n"
  },
  {
    "path": "lib/components/mdx-widgets/parsed-codes/greeting.tsx",
    "content": "import React from 'react'\n\nconst __html = `\n<span class=\"token keyword\">function</span> <span class=\"token function\">getGreeting</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">user</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword control-flow\">if</span> <span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword control-flow\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">Hello, </span><span class=\"token punctuation\">{</span><span class=\"token function\">formatName</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">!</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword control-flow\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">Hello, Stranger.</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">&gt;</span></span>\n<span class=\"token punctuation\">}</span>\n`.trim()\n\nexport const Greeting: React.FC<unknown> = () => (\n  <code className=\"language-jsx\" dangerouslySetInnerHTML={{ __html }} />\n)\n"
  },
  {
    "path": "lib/components/mdx-widgets/parsed-codes/index.ts",
    "content": "export * from './clock'\nexport * from './greeting'\nexport * from './types'\n"
  },
  {
    "path": "lib/components/mdx-widgets/parsed-codes/types.tsx",
    "content": "import React from 'react'\n\nconst __html = `\n<span class=\"token keyword module\">import</span> <span class=\"token punctuation\">{</span> someFunc<span class=\"token punctuation\">,</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\"><span class=\"token maybe-class-name\">BaseType</span></span> <span class=\"token punctuation\">}</span> <span class=\"token keyword module\">from</span> <span class=\"token string\">'./some-module.ts'</span>\n\n<span class=\"token comment\">// BaseType is always guaranteed to be erased</span>\n<span class=\"token comment\">// and someFunc will be preserved</span>\n<span class=\"token keyword module\">export</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\"><span class=\"token maybe-class-name\">Thing</span></span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\"><span class=\"token maybe-class-name\">BaseType</span></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">someMethod</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">someFunc</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n`.trim()\nexport const Types: React.FC<unknown> = () => (\n  <code className=\"language-jsx\" dangerouslySetInnerHTML={{ __html }} />\n)\n"
  },
  {
    "path": "lib/components/playground/code-theme.ts",
    "content": "import { PrismTheme } from 'prism-react-renderer'\nimport { GeistUIThemes } from 'components/themes/presets'\n\nconst makeCodeTheme = (theme: GeistUIThemes): PrismTheme => ({\n  plain: {\n    backgroundColor: theme.palette.background,\n    color: theme.palette.accents_4,\n    fontWeight: '400',\n    fontStyle: 'normal',\n    fontFamily: theme.font.mono,\n    fontSize: '.875rem',\n    textRendering: 'geometricPrecision',\n  },\n  styles: [\n    {\n      types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],\n      style: {\n        color: 'theme.palette.accents_3',\n        opacity: 0.5,\n      },\n    },\n    {\n      types: ['namespace'],\n      style: {\n        opacity: 1,\n      },\n    },\n    {\n      types: ['tag', 'operator', 'number'],\n      style: {\n        color: theme.palette.accents_6,\n      },\n    },\n    {\n      types: ['property', 'function'],\n      style: {\n        color: theme.palette.success,\n      },\n    },\n    {\n      types: ['tag-id', 'selector', 'atrule-id'],\n      style: {\n        color: '#eeebff',\n      },\n    },\n    {\n      types: ['attr-name'],\n      style: {\n        color: theme.palette.warning,\n      },\n    },\n    {\n      types: [\n        'boolean',\n        'string',\n        'entity',\n        'url',\n        'attr-value',\n        'keyword',\n        'control',\n        'directive',\n        'unit',\n        'statement',\n        'regex',\n        'at-rule',\n        'placeholder',\n        'variable',\n      ],\n      style: {\n        color: theme.palette.purple,\n      },\n    },\n    {\n      types: ['deleted'],\n      style: {\n        textDecorationLine: 'line-through',\n      },\n    },\n    {\n      types: ['language-javascript', 'script'],\n      style: {\n        color: theme.palette.success,\n      },\n    },\n    {\n      types: ['inserted'],\n      style: {\n        textDecorationLine: 'underline',\n      },\n    },\n    {\n      types: ['italic'],\n      style: {\n        fontStyle: 'italic',\n      },\n    },\n    {\n      types: ['important', 'bold'],\n      style: {\n        fontWeight: 'bold',\n      },\n    },\n    {\n      types: ['important'],\n      style: {\n        color: '#c4b9fe',\n      },\n    },\n  ],\n})\n\nexport default makeCodeTheme\n"
  },
  {
    "path": "lib/components/playground/dynamic-live.tsx",
    "content": "import React from 'react'\nimport { LivePreview, LiveProvider, LiveError } from 'react-live'\nimport { useTheme } from 'components'\nimport makeCodeTheme from './code-theme'\nimport Editor from './editor'\n\nexport interface Props {\n  code: string\n  scope: {\n    [key: string]: any\n  }\n}\n\nconst DynamicLive: React.FC<Props> = ({ code, scope }) => {\n  const theme = useTheme()\n  const codeTheme = makeCodeTheme(theme)\n  return (\n    <LiveProvider code={code} scope={scope} theme={codeTheme}>\n      <div className=\"wrapper\">\n        <LivePreview />\n        <LiveError className=\"live-error\" />\n      </div>\n      <Editor code={code} />\n      <style jsx>{`\n        .wrapper {\n          width: 100%;\n          padding: ${theme.layout.pageMargin};\n          display: flex;\n          flex-direction: column;\n          box-sizing: border-box;\n        }\n        .wrapper > :global(div) {\n          width: 100%;\n          background-color: transparent;\n        }\n        .wrapper > :global(.live-error) {\n          padding: 10px 12px 0 12px;\n          margin-bottom: 0;\n          border: 2px ${theme.palette.error} dotted;\n          border-radius: 10px;\n          color: ${theme.palette.errorLight};\n          font-size: 13px;\n        }\n      `}</style>\n    </LiveProvider>\n  )\n}\n\nexport default DynamicLive\n"
  },
  {
    "path": "lib/components/playground/editor.tsx",
    "content": "import React, { useState } from 'react'\nimport { LiveEditor } from 'react-live'\nimport { useConfigs } from 'lib/config-context'\nimport { useTheme, useToasts, useClipboard } from 'components'\nimport CopyIcon from '@geist-ui/icons/copy'\nimport RightIcon from '@geist-ui/icons/chevronRight'\n\ninterface Props {\n  code: string\n}\n\nconst Editor: React.FC<Props> = ({ code }) => {\n  const theme = useTheme()\n  const { copy } = useClipboard()\n  const { isChinese } = useConfigs()\n  const [visible, setVisible] = useState(false)\n  const { setToast } = useToasts()\n  const clickHandler = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    event.preventDefault()\n    setVisible(!visible)\n  }\n\n  const copyHandler = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    event.preventDefault()\n    copy(code)\n    setToast({ text: isChinese ? '代码已拷贝至剪切板。' : 'code copied.' })\n  }\n\n  return (\n    <div className=\"editor\">\n      <details open={visible}>\n        <summary onClick={clickHandler}>\n          <div className=\"summary-safari\">\n            <div className=\"action\">\n              <span className=\"arrow\">\n                <RightIcon size={16} />\n              </span>\n              <span>{isChinese ? '编辑代码' : 'Code Editor'}</span>\n            </div>\n            <div className=\"action\">\n              {visible && (\n                <span\n                  className=\"copy\"\n                  onClick={copyHandler}\n                  title={isChinese ? '拷贝代码' : 'Copy Code'}>\n                  <CopyIcon size={18} />\n                </span>\n              )}\n            </div>\n          </div>\n        </summary>\n        <div className=\"area\">\n          <LiveEditor />\n        </div>\n      </details>\n\n      <style jsx>{`\n        .editor {\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n        }\n\n        details {\n          transition: all 0.2s ease;\n          overflow: hidden;\n          border-bottom-left-radius: ${theme.layout.radius};\n          border-bottom-right-radius: ${theme.layout.radius};\n        }\n\n        details summary::-webkit-details-marker {\n          display: none;\n        }\n\n        summary {\n          box-sizing: border-box;\n          border-top: 1px solid ${theme.palette.accents_2};\n          color: ${theme.palette.accents_5};\n          width: 100%;\n          list-style: none;\n          user-select: none;\n          outline: none;\n        }\n\n        .summary-safari {\n          box-sizing: border-box;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          width: 100%;\n          height: 2.875rem;\n          padding: 0 ${theme.layout.gap};\n        }\n\n        summary :global(svg) {\n          cursor: pointer;\n        }\n\n        .action {\n          width: auto;\n          display: flex;\n          align-items: center;\n          font-size: 0.8rem;\n        }\n\n        .area {\n          position: relative;\n          box-sizing: border-box;\n          white-space: pre;\n          font-family: ${theme.font.mono};\n          color: ${theme.palette.foreground};\n          background-color: ${theme.palette.background};\n          font-size: 1em;\n          overflow: hidden;\n          border-top: 1px solid ${theme.palette.accents_2};\n          padding: ${theme.layout.gapHalf};\n        }\n\n        .arrow {\n          transition: all 0.2s ease;\n          transform: rotate(${visible ? 90 : 0}deg);\n          display: inline-flex;\n          align-items: center;\n          width: 1rem;\n          height: 1rem;\n          margin-right: 0.5rem;\n        }\n\n        .copy {\n          display: inline-flex;\n          align-items: center;\n          color: ${theme.palette.accents_4};\n          transition: color 0.2s ease;\n        }\n\n        .copy:hover {\n          color: ${theme.palette.accents_6};\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Editor\n"
  },
  {
    "path": "lib/components/playground/index.ts",
    "content": "import Playground from './playground'\n\nexport default Playground\n"
  },
  {
    "path": "lib/components/playground/playground.tsx",
    "content": "import React from 'react'\nimport dynamic from 'next/dynamic'\nimport { useTheme, Loading } from 'components'\nimport { useConfigs } from 'lib/config-context'\nimport Title from './title'\n\nconst DynamicLive = dynamic(() => import('./dynamic-live'), {\n  ssr: false,\n  loading: () => (\n    <div style={{ padding: '20pt 0' }}>\n      <Loading />\n    </div>\n  ),\n})\n\nexport type PlaygroundProps = {\n  title?: React.ReactNode | string\n  desc?: React.ReactNode | string\n  code: string\n  scope: {\n    [key: string]: any\n  }\n}\n\nconst defaultProps = {\n  desc: '',\n  code: '',\n  bindings: {},\n}\n\nconst Playground: React.FC<PlaygroundProps> = React.memo(\n  ({\n    title: inputTitle,\n    code: inputCode,\n    desc,\n    scope,\n  }: PlaygroundProps & typeof defaultProps) => {\n    const theme = useTheme()\n    const { isChinese } = useConfigs()\n    const code = inputCode.trim()\n    const title = inputTitle || (isChinese ? '基础的' : 'General')\n\n    return (\n      <>\n        <Title title={title} desc={desc} />\n        <div className=\"playground\">\n          <DynamicLive code={code} scope={scope} />\n          <style jsx>{`\n            .playground {\n              width: 100%;\n              border-radius: ${theme.layout.radius};\n              border: 1px solid ${theme.palette.accents_2};\n            }\n          `}</style>\n        </div>\n      </>\n    )\n  },\n)\n\nPlayground.defaultProps = defaultProps\nPlayground.displayName = 'GeistPlayground'\nexport default Playground\n"
  },
  {
    "path": "lib/components/playground/title.tsx",
    "content": "import React from 'react'\nimport { VirtualAnchor } from '../pures'\n\nexport type TitleProps = {\n  title: React.ReactNode | string\n  desc?: React.ReactNode | string\n}\n\nconst defaultProps = {\n  desc: '',\n}\n\nconst replaceCode = (desc: string): string => {\n  if (!desc.includes('`')) return desc\n  let count = 0\n  return desc.replace(/`/g, () => {\n    const val = count % 2 === 0 ? '<code>' : '</code>'\n    count++\n    return val\n  })\n}\n\nconst Title: React.FC<TitleProps> = React.memo(\n  ({ title, desc }: TitleProps & typeof defaultProps) => {\n    const isStringDesc = typeof desc === 'string'\n    return (\n      <>\n        <h3>\n          <VirtualAnchor>{title}</VirtualAnchor>\n        </h3>\n        {desc && isStringDesc && (\n          <p dangerouslySetInnerHTML={{ __html: replaceCode(desc) }} />\n        )}\n        {desc && !isStringDesc && <p>{desc}</p>}\n        <style jsx>{`\n          h3 {\n            margin-bottom: ${desc ? 0 : '30px'};\n            line-height: 1;\n            font-size: 1.3rem;\n            margin-top: 55px;\n            text-transform: capitalize;\n            position: relative;\n          }\n\n          h3 > p {\n            margin: 0;\n          }\n\n          h3 > :global(code),\n          h3 > :global(pre) {\n            text-transform: none;\n          }\n        `}</style>\n      </>\n    )\n  },\n)\n\nTitle.defaultProps = defaultProps\nTitle.displayName = 'GeistPlayGroundTitle'\nexport default Title\n"
  },
  {
    "path": "lib/components/pures/anchor/anchor-icon.tsx",
    "content": "import React from 'react'\n\nconst AnchorIcon = () => {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"100%\"\n      height=\"100%\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      fill=\"none\"\n      shapeRendering=\"geometricPrecision\"\n      style={{ color: 'currentColor' }}>\n      <path d=\"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\" />\n      <path d=\"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\" />\n    </svg>\n  )\n}\n\nexport default AnchorIcon\n"
  },
  {
    "path": "lib/components/pures/anchor/index.tsx",
    "content": "import React, { useEffect, useRef, useState } from 'react'\nimport { Link, useTheme } from 'components'\nimport AnchorIcon from './anchor-icon'\n\nexport interface Props {\n  pure?: boolean\n}\n\nexport const virtualAnchorEncode = (text?: string) => {\n  if (!text) return undefined\n  return text.toLowerCase().replace(/ /g, '-')\n}\n\nconst VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({ children, pure }) => {\n  const theme = useTheme()\n  const ref = useRef<HTMLAnchorElement>(null)\n  const [id, setId] = useState<string | undefined>()\n\n  useEffect(() => {\n    if (!ref.current) return\n    setId(virtualAnchorEncode(ref.current.textContent || undefined))\n  }, [ref.current])\n\n  return (\n    <span className=\"parent\" ref={ref}>\n      <Link href={`#${id}`}>{children}</Link>\n      <span className=\"virtual\" id={id} />\n      {!pure && (\n        <span className=\"icon\">\n          <AnchorIcon />\n        </span>\n      )}\n      <style jsx>{`\n        .parent {\n          position: relative;\n          color: inherit;\n        }\n\n        .parent :global(a) {\n          color: inherit;\n        }\n\n        .virtual {\n          position: absolute;\n          top: -65px;\n          left: 0;\n          opacity: 0;\n          pointer-events: none;\n          visibility: hidden;\n        }\n\n        .icon {\n          display: inline-flex;\n          justify-content: center;\n          align-items: center;\n          overflow: hidden;\n          left: -1.5em;\n          top: 50%;\n          transform: translateY(-50%);\n          position: absolute;\n          opacity: 0;\n          visibility: hidden;\n          font-size: inherit;\n          width: 0.8em;\n          height: 0.8em;\n          margin-top: 1px;\n          color: ${theme.palette.accents_5};\n        }\n\n        .parent:hover > .icon {\n          opacity: 1;\n          visibility: visible;\n        }\n      `}</style>\n    </span>\n  )\n}\n\nexport default VirtualAnchor\n"
  },
  {
    "path": "lib/components/pures/controls.tsx",
    "content": "import React, { useMemo } from 'react'\nimport {\n  Button,\n  useTheme,\n  Select,\n  Spacer,\n  Themes,\n  useAllThemes,\n  Text,\n  Keyboard,\n} from 'components'\nimport { useConfigs } from 'lib/config-context'\nimport useLocale from 'lib/use-locale'\nimport Router, { useRouter } from 'next/router'\nimport MoonIcon from '@geist-ui/icons/moon'\nimport SunIcon from '@geist-ui/icons/sun'\nimport UserIcon from '@geist-ui/icons/user'\nimport GitHubIcon from '@geist-ui/icons/github'\nimport {\n  CHINESE_LANGUAGE_IDENT,\n  CUSTOM_THEME_TYPE,\n  ENGLISH_LANGUAGE_IDENT,\n  GITHUB_URL,\n} from 'lib/constants'\n\nconst Controls: React.FC<unknown> = React.memo(() => {\n  const theme = useTheme()\n  const { themes } = useAllThemes()\n  const { switchTheme, updateChineseState } = useConfigs()\n  const { pathname } = useRouter()\n  const { locale } = useLocale()\n  const isChinese = useMemo(() => locale === CHINESE_LANGUAGE_IDENT, [locale])\n  const nextLocalePath = useMemo(() => {\n    const nextLocale = isChinese ? ENGLISH_LANGUAGE_IDENT : CHINESE_LANGUAGE_IDENT\n    return pathname.replace(locale, nextLocale)\n  }, [locale, pathname])\n  const hasCustomTheme = useMemo(() => Themes.hasUserCustomTheme(themes), [themes])\n\n  const switchThemes = (type: string) => {\n    switchTheme(type)\n    if (typeof window === 'undefined' || !window.localStorage) return\n    window.localStorage.setItem('theme', type)\n  }\n  const switchLanguages = () => {\n    updateChineseState(!isChinese)\n    Router.push(nextLocalePath)\n  }\n  const redirectGithub = () => {\n    if (typeof window === 'undefined') return\n    window.open(GITHUB_URL)\n  }\n\n  return (\n    <div className=\"wrapper\">\n      <Keyboard\n        h=\"28px\"\n        command\n        font=\"12px\"\n        className=\"shortcuts\"\n        title=\"Command + K to search.\">\n        K\n      </Keyboard>\n      <Spacer w={0.75} />\n      <Button\n        w=\"28px\"\n        h=\"28px\"\n        py={0}\n        px={0}\n        onClick={switchLanguages}\n        title={isChinese ? '切换语言' : 'switch language'}>\n        <Text font=\"13px\" style={{ fontWeight: 500 }}>\n          {isChinese ? 'En' : '中'}\n        </Text>\n      </Button>\n      <Spacer w={0.75} />\n      <Button\n        w=\"28px\"\n        h=\"28px\"\n        py={0}\n        px={0}\n        icon={<GitHubIcon />}\n        onClick={redirectGithub}\n        title={isChinese ? '代码仓库' : 'GitHub Repository'}\n      />\n      <Spacer w={0.75} />\n      <Select\n        scale={0.5}\n        h=\"28px\"\n        pure\n        onChange={switchThemes}\n        value={theme.type}\n        title={isChinese ? '切换主题' : 'Switch Themes'}>\n        <Select.Option value=\"light\">\n          <span className=\"select-content\">\n            <SunIcon size={14} /> {isChinese ? '明亮' : 'Light'}\n          </span>\n        </Select.Option>\n        <Select.Option value=\"dark\">\n          <span className=\"select-content\">\n            <MoonIcon size={14} /> {isChinese ? '暗黑' : 'Dark'}\n          </span>\n        </Select.Option>\n        {hasCustomTheme && (\n          <Select.Option value={CUSTOM_THEME_TYPE}>\n            <span className=\"select-content\">\n              <UserIcon size={14} /> {CUSTOM_THEME_TYPE}\n            </span>\n          </Select.Option>\n        )}\n      </Select>\n      <style jsx>{`\n        .wrapper {\n          display: flex;\n          align-items: center;\n        }\n        .wrapper :global(kbd.shortcuts) {\n          line-height: 28px !important;\n          cursor: help;\n          opacity: 0.75;\n          border: none;\n        }\n        .wrapper :global(.select) {\n          width: 85px;\n          min-width: 85px;\n        }\n        .select-content {\n          width: auto;\n          height: 18px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n        }\n        .select-content :global(svg) {\n          margin-right: 10px;\n          margin-left: 2px;\n        }\n      `}</style>\n    </div>\n  )\n})\n\nexport default Controls\n"
  },
  {
    "path": "lib/components/pures/index.ts",
    "content": "export { default as VirtualAnchor } from './anchor'\nexport { default as Controls } from './controls'\n"
  },
  {
    "path": "lib/components/search/helper.ts",
    "content": "import seeds, { Seeds } from '../../data/seeds'\n\nexport type SearchResults = Seeds\nexport type SearchResultGroup = {\n  title: string\n  items: Seeds\n}\n\nexport const search = (keyword: string, local: string): SearchResults => {\n  const localSeeds = local.includes('zh') ? seeds['zh-cn'] : seeds['en-us']\n  const lowerCaseKeyword = keyword.toLowerCase()\n  const data = localSeeds\n    .filter(seed => {\n      if (seed.name.toLowerCase().includes(lowerCaseKeyword)) return true\n      return seed.group?.toLocaleLowerCase().includes(keyword)\n    })\n    .slice(0, 10)\n    .sort(seed => {\n      const startsWithName = seed.name.toLowerCase().startsWith(lowerCaseKeyword)\n      const startsWithGroup = seed.group?.toLowerCase().startsWith(lowerCaseKeyword)\n      if (startsWithName) return -1\n      if (startsWithGroup) return 0\n      return 1\n    })\n  return data\n}\n\nexport const groupResults = (data: SearchResults) => {\n  return data.reduce<SearchResultGroup[]>((acc, item) => {\n    const title = item.group || 'General'\n    const group = acc.find(group => group.title === title)\n    if (!group) {\n      acc.push({ title, items: [item] })\n    } else {\n      group.items.push(item)\n    }\n    return acc\n  }, [])\n}\n\nexport const flattenArray = <T>(contents: T[][] | unknown): T[] => {\n  if (!Array.isArray(contents)) return contents as T[]\n  return contents.reduce((pre, current) => {\n    return pre.concat(\n      Array.isArray(current) ? flattenArray(current as any as T[][]) : current,\n    )\n  }, [])\n}\n\nexport const isSearchItem = (el?: HTMLElement): boolean => {\n  if (!el) return false\n  return !!el.attributes.getNamedItem('data-search-item')\n}\n\nexport const focusNextElement = (\n  containerElement: HTMLElement | null,\n  done: () => void,\n  isBack?: boolean,\n) => {\n  const focusTo = (child?: HTMLElement) => {\n    if (child?.tagName !== 'BUTTON') return\n    done()\n    ;(child as HTMLButtonElement)?.focus()\n  }\n\n  if (!containerElement) return\n  const children = Array.from(containerElement.querySelectorAll('button'))\n  if (children.length === 0) return\n\n  const index = children.findIndex(child => child === document.activeElement)\n\n  if (index === -1) {\n    if (isBack) return\n    return focusTo(children[0])\n  }\n\n  if (isBack) {\n    if (index - 1 < 0) return focusTo(children[children.length - 1])\n    return focusTo(children[index - 1])\n  }\n\n  if (index + 2 > children.length) return focusTo(children[0])\n  focusTo(children[index + 1])\n}\n"
  },
  {
    "path": "lib/components/search/index.tsx",
    "content": "import dynamic from 'next/dynamic'\n\nconst SearchDynamic = dynamic(() => import('./search'), {\n  ssr: false,\n  loading: () => null,\n})\n\nconst Search = () => {\n  return (\n    <div className=\"search\">\n      <SearchDynamic />\n      <style jsx>{`\n        .search {\n          visibility: hidden;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Search\n"
  },
  {
    "path": "lib/components/search/search-icon.tsx",
    "content": "import React, { useMemo } from 'react'\nimport { SearchResults } from './helper'\nimport Type from '@geist-ui/icons/type'\nimport FileFunctionFill from '@geist-ui/icons/fileFunctionFill'\nimport Lambda from '@geist-ui/icons/lambda'\nimport Image from '@geist-ui/icons/image'\nimport Package from '@geist-ui/icons/package'\nimport Codesandbox from '@geist-ui/icons/codesandbox'\nimport Layout from '@geist-ui/icons/layout'\nimport Link from '@geist-ui/icons/link'\n\nconst getIcon = (data: SearchResults[number]): React.ReactElement | null => {\n  const name = data.name.toLowerCase()\n  const group = data.group?.toLowerCase()\n  if (name === 'text') return <Type />\n  if (group === 'codesandbox') return <Codesandbox />\n  if (group === 'external') return <Link />\n  if (data.url.endsWith('icons')) return <Package />\n  if (data.url.endsWith('server-render')) return <Lambda />\n  if (data.url.endsWith('image')) return <Image />\n  if (data.url.includes('guide')) return <Layout />\n  if (data.name.startsWith('use')) return <FileFunctionFill />\n  return null\n}\n\nexport type SearchIconProps = {\n  data: SearchResults[number]\n}\n\nconst SearchIcon: React.FC<SearchIconProps> = ({ data }) => {\n  const icon = useMemo(() => getIcon(data), [data])\n\n  if (icon) return icon\n\n  return (\n    <svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill=\"currentColor\"\n        d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\"\n      />\n    </svg>\n  )\n}\n\nexport default SearchIcon\n"
  },
  {
    "path": "lib/components/search/search-item.tsx",
    "content": "import React, { MouseEvent, FocusEvent } from 'react'\nimport { SearchResults } from './helper'\nimport { Text, useTheme } from 'components'\nimport SearchIcon from './search-icon'\n\nexport type SearchItemProps = {\n  data: SearchResults[number]\n  onMouseOver: (e: MouseEvent<HTMLButtonElement>) => void\n  onSelect: (url: string) => void\n  onFocus: (e: FocusEvent<HTMLButtonElement>) => void\n  onBlur?: (e: FocusEvent<HTMLButtonElement>) => void\n}\n\nconst SearchItem: React.FC<SearchItemProps> = ({\n  data,\n  onMouseOver,\n  onSelect,\n  onFocus,\n  onBlur = () => {},\n}) => {\n  const theme = useTheme()\n  const selectHandler = () => {\n    onSelect(data.url)\n  }\n\n  return (\n    <li role=\"option\">\n      <button\n        className=\"container\"\n        onClick={selectHandler}\n        onMouseOver={onMouseOver}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        data-search-item>\n        <SearchIcon data={data} />\n        <Text pl=\"12px\" font=\"14px\" className=\"value\" span>\n          {data.name}\n        </Text>\n        <style jsx>{`\n          .container {\n            width: 100%;\n            height: 48px;\n            padding: 0 1rem;\n            display: flex;\n            align-items: center;\n            cursor: pointer;\n            position: relative;\n            transition: color 200ms ease;\n            outline: none;\n            border: 0;\n            color: ${theme.palette.accents_4};\n            background-color: transparent;\n          }\n          .container:focus {\n            color: ${theme.palette.foreground};\n          }\n          .container:global(.value) {\n          }\n          .container:global(svg) {\n            width: 16px;\n            height: 16px;\n          }\n        `}</style>\n      </button>\n    </li>\n  )\n}\n\nexport default SearchItem\n"
  },
  {
    "path": "lib/components/search/search-items.tsx",
    "content": "import React, {\n  MouseEvent,\n  useRef,\n  useState,\n  FocusEvent,\n  useImperativeHandle,\n  useMemo,\n} from 'react'\nimport { groupResults, isSearchItem, SearchResults } from './helper'\nimport SearchItem from './search-item'\nimport { useTheme } from 'components'\nimport Highlight from 'components/shared/highlight'\nimport { useRect } from 'components/utils/layouts'\n\nexport type SearchItemsProps = {\n  data: SearchResults\n  onSelect: (url: string) => void\n  preventHoverHighlightSync?: boolean\n  displayHoverHighlight?: boolean\n}\n\nexport type SearchItemsRef = HTMLUListElement & {\n  closeHighlight: () => void\n}\n\nconst SearchItems = React.forwardRef<\n  SearchItemsRef,\n  React.PropsWithChildren<SearchItemsProps>\n>(\n  (\n    { data, onSelect, preventHoverHighlightSync },\n    outRef: React.Ref<SearchItemsRef | null>,\n  ) => {\n    const theme = useTheme()\n    const { rect, setRect } = useRect()\n    const ref = useRef<HTMLUListElement | null>(null)\n    const [displayHighlight, setDisplayHighlight] = useState<boolean>(false)\n    useImperativeHandle(outRef, () =>\n      Object.assign(ref.current, {\n        closeHighlight: () => setDisplayHighlight(false),\n      }),\n    )\n\n    const hoverHandler = (event: MouseEvent<HTMLButtonElement>) => {\n      if (preventHoverHighlightSync) return\n      if (!isSearchItem(event.target as HTMLButtonElement)) return\n      ;(event.target as HTMLButtonElement).focus()\n    }\n    const focusHandler = (event: FocusEvent<HTMLButtonElement>) => {\n      if (!isSearchItem(event.target as HTMLButtonElement)) return\n      setRect(event, () => ref.current)\n      setDisplayHighlight(true)\n    }\n    const blurHandler = () => {\n      setDisplayHighlight(false)\n    }\n\n    const grouppedResults = useMemo(() => groupResults(data), [data])\n\n    return (\n      <ul className=\"results\" role=\"listbox\" ref={ref}>\n        <Highlight\n          className=\"results-hover\"\n          rect={rect}\n          visible={displayHighlight}\n          activeOpacity={0.5}\n        />\n        {grouppedResults.map((group) => (\n          <li role=\"presentation\" key={group.title}>\n            <div className=\"group-title\">{group.title}</div>\n            <ul role=\"group\">\n              {group.items.map(item => (\n                <SearchItem\n                  onSelect={onSelect}\n                  onMouseOver={hoverHandler}\n                  onFocus={focusHandler}\n                  onBlur={blurHandler}\n                  data={item}\n                  key={item.url}\n                />\n              ))}\n            </ul>\n          </li>\n        ))}\n        <style jsx>{`\n          .results {\n            width: 100%;\n            max-height: 300px;\n            overflow-y: auto;\n            position: relative;\n            scroll-behavior: smooth;\n            margin-bottom: 0.5rem;\n          }\n          .results :global(li:before) {\n            content: none;\n          }\n          .group-title {\n            color: ${theme.palette.accents_5};\n            font-size: 0.75rem;\n            text-align: start;\n            margin: 0.25rem 0;\n          }\n          .results:global(div.highlight.results-hover) {\n            border-radius: 8px;\n          }\n        `}</style>\n      </ul>\n    )\n  },\n)\n\nexport default SearchItems\n"
  },
  {
    "path": "lib/components/search/search.tsx",
    "content": "import React, { useEffect, useRef, useState } from 'react'\nimport {\n  Modal,\n  useKeyboard,\n  KeyMod,\n  KeyCode,\n  useModal,\n  Input,\n  useTheme,\n  useInput,\n  useCurrentState,\n  Divider,\n} from 'components'\nimport { focusNextElement, search, SearchResults } from './helper'\nimport SearchItems, { SearchItemsRef } from './search-items'\nimport { useRouter } from 'next/router'\nimport useLocale from 'lib/use-locale'\n\nconst Search: React.FC<unknown> = () => {\n  const theme = useTheme()\n  const router = useRouter()\n  const { locale } = useLocale()\n  const [preventHover, setPreventHover, preventHoverRef] = useCurrentState<boolean>(false)\n  const ref = useRef<HTMLInputElement | null>(null)\n  const itemsRef = useRef<SearchItemsRef | null>(null)\n  const [state, setState] = useState<SearchResults>([])\n  const { bindings, setVisible, visible } = useModal(false)\n  const { bindings: inputBindings, setState: setInput, state: input } = useInput('')\n\n  const cleanAfterModalClose = () => {\n    setVisible(false)\n    const timer = window.setTimeout(() => {\n      setState([])\n      setInput('')\n      itemsRef.current?.scrollTo(0, 0)\n      setPreventHover(true)\n      window.clearTimeout(timer)\n    }, 400)\n  }\n\n  useKeyboard(() => {\n    setVisible(true)\n    const timer = setTimeout(() => {\n      ref.current?.focus()\n      window.clearTimeout(timer)\n    }, 0)\n  }, [KeyMod.CtrlCmd, KeyCode.KEY_K])\n\n  useEffect(() => {\n    if (!input) return setState([])\n    setPreventHover(true)\n    setState(search(input, locale))\n    itemsRef.current?.scrollTo(0, 0)\n  }, [input])\n\n  useEffect(() => {\n    if (visible) return\n    cleanAfterModalClose()\n  }, [visible])\n\n  useEffect(() => {\n    const eventHandler = () => {\n      if (!preventHoverRef.current) return\n      setPreventHover(false)\n    }\n    document.addEventListener('mousemove', eventHandler)\n    return () => {\n      document.removeEventListener('mousemove', eventHandler)\n    }\n  }, [])\n\n  const selectHandler = (url: string) => {\n    if (url.startsWith('http')) return window.open(url)\n    router.push(url)\n    setVisible(false)\n  }\n\n  const { bindings: KeyBindings } = useKeyboard(\n    event => {\n      const isBack = event.keyCode === KeyCode.UpArrow\n      focusNextElement(\n        itemsRef.current,\n        () => {\n          setPreventHover(true)\n        },\n        isBack,\n      )\n    },\n    [KeyCode.DownArrow, KeyCode.UpArrow],\n    {\n      disableGlobalEvent: true,\n    },\n  )\n\n  return (\n    <div className=\"container\" {...KeyBindings}>\n      <Modal\n        {...bindings}\n        py={0}\n        px={0.75}\n        wrapClassName=\"search-menu\"\n        positionClassName=\"search-position\">\n        <Input\n          ref={ref}\n          w=\"100%\"\n          font=\"1.125rem\"\n          py={0.75}\n          placeholder=\"Search a component\"\n          className=\"search-input\"\n          clearable\n          {...inputBindings}\n        />\n        {state.length > 0 && (\n          <>\n            <Divider mt={0} mb={1} />\n            <SearchItems\n              preventHoverHighlightSync={preventHover}\n              ref={itemsRef}\n              data={state}\n              onSelect={selectHandler}\n            />\n          </>\n        )}\n      </Modal>\n      <style jsx>{`\n        .title {\n          width: 100%;\n          color: ${theme.palette.background};\n          background-color: ${theme.palette.violet};\n          display: flex;\n          justify-content: flex-end;\n          padding: 0 10px;\n          user-select: none;\n        }\n        .container {\n          visibility: hidden;\n        }\n        :global(.search-menu ul),\n        :global(.search-menu li) {\n          padding: 0;\n          margin: 0;\n          list-style: none;\n        }\n        :global(.search-menu .input-container.search-input) {\n          border: none;\n          border-radius: 0;\n        }\n        :global(.search-menu .input-container div.input-wrapper) {\n          border: none;\n          border-radius: 0;\n        }\n        :global(.search-menu .input-container .input-wrapper.hover) {\n          border: none;\n        }\n        :global(.search-menu .input-container .input-wrapper:active) {\n          border: none;\n        }\n        :global(div.search-position.position) {\n          position: absolute;\n          top: 100px;\n          left: 50%;\n          transform: translateX(-50%);\n          transition: all 500ms ease;\n          width: 500px;\n          height: auto;\n        }\n        :global(.search-menu.wrapper) {\n          box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15), 0 -5px 20px 0 rgba(0, 0, 0, 0.15) !important;\n        }\n      `}</style>\n    </div>\n  )\n}\n\nexport default Search\n"
  },
  {
    "path": "lib/config-context.ts",
    "content": "import React from 'react'\nimport type { DeepPartial } from 'components/utils/types'\nimport { GeistUIThemes } from 'components'\n\nexport interface Configs {\n  onThemeChange?: (themes: DeepPartial<GeistUIThemes>) => void\n  isChinese?: boolean\n  updateChineseState: (state: boolean) => void\n  sidebarScrollHeight: number\n  updateSidebarScrollHeight: (height: number) => void\n\n  customTheme: DeepPartial<GeistUIThemes>\n  updateCustomTheme: (theme: DeepPartial<GeistUIThemes>) => void\n  switchTheme: (type: string) => void\n}\n\nexport const defaultConfigs: Configs = {\n  sidebarScrollHeight: 0,\n  updateSidebarScrollHeight: () => {},\n  updateChineseState: () => {},\n\n  customTheme: {},\n  updateCustomTheme: () => {},\n  onThemeChange: () => {},\n  switchTheme: () => {},\n}\n\nexport const ConfigContext = React.createContext<Configs>(defaultConfigs)\n\nexport const useConfigs = (): Configs => React.useContext(ConfigContext)\n"
  },
  {
    "path": "lib/config-provider.tsx",
    "content": "import React, { useMemo, useState } from 'react'\nimport { ConfigContext, Configs } from 'lib/config-context'\nimport { useRouter } from 'next/router'\nimport type { DeepPartial } from 'components/utils/types'\nimport { GeistUIThemes, Themes } from 'components'\nimport { useTheme } from 'components'\nimport { CHINESE_LANGUAGE_IDENT, CUSTOM_THEME_TYPE } from './constants'\n\nconst defaultProps = {}\n\nexport type ConfigProviderProps = {\n  onThemeChange?: (themes: DeepPartial<GeistUIThemes>) => void\n  onThemeTypeChange?: (type: string) => void\n}\n\nconst ConfigProvider: React.FC<React.PropsWithChildren<ConfigProviderProps>> = React.memo(\n  ({\n    onThemeChange,\n    onThemeTypeChange,\n    children,\n  }: React.PropsWithChildren<ConfigProviderProps> & typeof defaultProps) => {\n    const theme = useTheme()\n    const { pathname } = useRouter()\n    const [isChinese, setIsChinese] = useState<boolean>(() =>\n      pathname.includes(CHINESE_LANGUAGE_IDENT),\n    )\n    const [scrollHeight, setScrollHeight] = useState<number>(0)\n    const [customTheme, setCustomTheme] = useState<GeistUIThemes>(theme)\n\n    const updateSidebarScrollHeight = (height: number) => setScrollHeight(height)\n    const updateChineseState = (state: boolean) => setIsChinese(state)\n    const updateCustomTheme = (nextTheme: DeepPartial<GeistUIThemes>) => {\n      const mergedTheme = Themes.create(theme, { ...nextTheme, type: CUSTOM_THEME_TYPE })\n      setCustomTheme(mergedTheme)\n      onThemeChange && onThemeChange(mergedTheme)\n    }\n    const switchTheme = (type: string) => {\n      onThemeTypeChange && onThemeTypeChange(type)\n    }\n\n    const initialValue = useMemo<Configs>(\n      () => ({\n        onThemeChange,\n        isChinese,\n        customTheme,\n        switchTheme,\n        updateCustomTheme,\n        updateChineseState,\n        sidebarScrollHeight: scrollHeight,\n        updateSidebarScrollHeight,\n      }),\n      [onThemeChange, scrollHeight, isChinese],\n    )\n\n    return (\n      <ConfigContext.Provider value={initialValue}>{children}</ConfigContext.Provider>\n    )\n  },\n)\n\nConfigProvider.defaultProps = defaultProps\nConfigProvider.displayName = 'GeistConfigProvider'\nexport default ConfigProvider\n"
  },
  {
    "path": "lib/constants.ts",
    "content": "export const CUSTOM_THEME_TYPE = 'Custom'\n\nexport const CHINESE_LANGUAGE_IDENT = 'zh-cn'\n\nexport const ENGLISH_LANGUAGE_IDENT = 'en-us'\n\nexport const GITHUB_URL = 'https://github.com/geist-org/geist-ui'\n\nexport const CONTRIBUTORS_URL = 'https://contributors.geist-ui.dev/api/users'\n"
  },
  {
    "path": "lib/data/index.ts",
    "content": "import enUS from './metadata-en-us.json'\nimport zhCN from './metadata-zh-cn.json'\nimport type { Sides } from 'lib/components/layout/sidebar/side-item'\n\nexport interface MultipleLocaleMetaInformation {\n  [key: string]: Sides[]\n}\n\nconst Metadata: MultipleLocaleMetaInformation = {\n  'en-us': enUS,\n  'zh-cn': zhCN,\n}\n\nexport default Metadata\n"
  },
  {
    "path": "lib/data/metadata-en-us.json",
    "content": "[{\"name\":\"guide\",\"children\":[{\"name\":\"Getting Started\",\"children\":[{\"name\":\"Introduction\",\"url\":\"/en-us/guide/introduction\",\"index\":5,\"group\":\"Getting Started\"},{\"name\":\"Installation\",\"url\":\"/en-us/guide/installation\",\"index\":10,\"group\":\"Getting Started\"},{\"name\":\"Bundle Size\",\"url\":\"/en-us/guide/bundle-size\",\"index\":11,\"group\":\"Getting Started\"},{\"name\":\"Server Render\",\"url\":\"/en-us/guide/server-render\",\"index\":15,\"group\":\"Getting Started\"}]},{\"name\":\"Customization\",\"children\":[{\"name\":\"Colors\",\"url\":\"/en-us/guide/colors\",\"index\":20,\"group\":\"Customization\"},{\"name\":\"Themes\",\"url\":\"/en-us/guide/themes\",\"index\":25,\"group\":\"Customization\"},{\"name\":\"Scale\",\"url\":\"/en-us/guide/scale\",\"index\":30,\"group\":\"Customization\"}]}]},{\"name\":\"components\",\"children\":[{\"name\":\"General\",\"children\":[{\"name\":\"Text\",\"url\":\"/en-us/components/text\",\"index\":10,\"group\":\"General\"},{\"name\":\"Button\",\"url\":\"/en-us/components/button\",\"index\":100,\"group\":\"General\"},{\"name\":\"Code\",\"url\":\"/en-us/components/code\",\"index\":100,\"group\":\"General\"},{\"name\":\"Icons\",\"url\":\"/en-us/components/icons\",\"index\":100,\"group\":\"General\"}]},{\"name\":\"Layout\",\"children\":[{\"name\":\"Grid\",\"url\":\"/en-us/components/grid\",\"index\":100,\"group\":\"Layout\"},{\"name\":\"Page\",\"url\":\"/en-us/components/page\",\"index\":100,\"group\":\"Layout\"},{\"name\":\"Spacer\",\"url\":\"/en-us/components/spacer\",\"index\":100,\"group\":\"Layout\"}]},{\"name\":\"Surfaces\",\"children\":[{\"name\":\"Card\",\"url\":\"/en-us/components/card\",\"index\":100,\"group\":\"Surfaces\"},{\"name\":\"Collapse\",\"url\":\"/en-us/components/collapse\",\"index\":100,\"group\":\"Surfaces\"},{\"name\":\"Fieldset\",\"url\":\"/en-us/components/fieldset\",\"index\":100,\"group\":\"Surfaces\"}]},{\"name\":\"Data Entry\",\"children\":[{\"name\":\"AutoComplete\",\"url\":\"/en-us/components/auto-complete\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Button Group\",\"url\":\"/en-us/components/button-group\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Checkbox\",\"url\":\"/en-us/components/checkbox\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Input\",\"url\":\"/en-us/components/input\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Radio\",\"url\":\"/en-us/components/radio\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Select\",\"url\":\"/en-us/components/select\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Slider\",\"url\":\"/en-us/components/slider\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Textarea\",\"url\":\"/en-us/components/textarea\",\"index\":100,\"group\":\"Data Entry\"},{\"name\":\"Toggle\",\"url\":\"/en-us/components/toggle\",\"index\":100,\"group\":\"Data Entry\"}]},{\"name\":\"Data Display\",\"children\":[{\"name\":\"Avatar\",\"url\":\"/en-us/components/avatar\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Badge\",\"url\":\"/en-us/components/badge\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Capacity\",\"url\":\"/en-us/components/capacity\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Description\",\"url\":\"/en-us/components/description\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Display\",\"url\":\"/en-us/components/display\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Dot\",\"url\":\"/en-us/components/dot\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"File Tree\",\"url\":\"/en-us/components/file-tree\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Image\",\"url\":\"/en-us/components/image\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Keyboard\",\"url\":\"/en-us/components/keyboard\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Popover\",\"url\":\"/en-us/components/popover\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Table\",\"url\":\"/en-us/components/table\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Tag\",\"url\":\"/en-us/components/tag\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"Tooltip\",\"url\":\"/en-us/components/tooltip\",\"index\":100,\"group\":\"Data Display\"},{\"name\":\"User\",\"url\":\"/en-us/components/user\",\"index\":100,\"group\":\"Data Display\"}]},{\"name\":\"Feedback\",\"children\":[{\"name\":\"Drawer\",\"url\":\"/en-us/components/drawer\",\"index\":100,\"group\":\"Feedback\"},{\"name\":\"Loading\",\"url\":\"/en-us/components/loading\",\"index\":100,\"group\":\"Feedback\"},{\"name\":\"Modal\",\"url\":\"/en-us/components/modal\",\"index\":100,\"group\":\"Feedback\"},{\"name\":\"Note\",\"url\":\"/en-us/components/note\",\"index\":100,\"group\":\"Feedback\"},{\"name\":\"Progress\",\"url\":\"/en-us/components/progress\",\"index\":100,\"group\":\"Feedback\"},{\"name\":\"Rating\",\"url\":\"/en-us/components/rating\",\"index\":100,\"group\":\"Feedback\"},{\"name\":\"Spinner\",\"url\":\"/en-us/components/spinner\",\"index\":100,\"group\":\"Feedback\"},{\"name\":\"Toast\",\"url\":\"/en-us/components/toast\",\"index\":100,\"group\":\"Feedback\"}]},{\"name\":\"Navigation\",\"children\":[{\"name\":\"Breadcrumbs\",\"url\":\"/en-us/components/breadcrumbs\",\"index\":100,\"group\":\"Navigation\"},{\"name\":\"Link\",\"url\":\"/en-us/components/link\",\"index\":100,\"group\":\"Navigation\"},{\"name\":\"Pagination\",\"url\":\"/en-us/components/pagination\",\"index\":100,\"group\":\"Navigation\"},{\"name\":\"Tabs\",\"url\":\"/en-us/components/tabs\",\"index\":100,\"group\":\"Navigation\"},{\"name\":\"Button Dropdown\",\"url\":\"/en-us/components/button-dropdown\",\"index\":101,\"group\":\"Navigation\"}]},{\"name\":\"Others\",\"children\":[{\"name\":\"Divider\",\"url\":\"/en-us/components/divider\",\"index\":100,\"group\":\"Others\"},{\"name\":\"Snippet\",\"url\":\"/en-us/components/snippet\",\"index\":100,\"group\":\"Others\"}]}]},{\"name\":\"hooks\",\"children\":[{\"name\":\"Enhancement\",\"children\":[{\"name\":\"useKeyboard\",\"url\":\"/en-us/hooks/use-keyboard\",\"index\":5,\"group\":\"Enhancement\"},{\"name\":\"useInput\",\"url\":\"/en-us/hooks/use-input\",\"index\":10,\"group\":\"Enhancement\"},{\"name\":\"useModal\",\"url\":\"/en-us/hooks/use-modal\",\"index\":11,\"group\":\"Enhancement\"},{\"name\":\"useTabs\",\"url\":\"/en-us/hooks/use-tabs\",\"index\":11,\"group\":\"Enhancement\"},{\"name\":\"useToast\",\"url\":\"/en-us/hooks/use-toast\",\"index\":12,\"group\":\"Enhancement\"}]},{\"name\":\"Utilities\",\"children\":[{\"name\":\"useBodyScroll\",\"url\":\"/en-us/hooks/use-body-scroll\",\"index\":100,\"group\":\"Utilities\"},{\"name\":\"useClickAway\",\"url\":\"/en-us/hooks/use-click-away\",\"index\":100,\"group\":\"Utilities\"},{\"name\":\"useClipboard\",\"url\":\"/en-us/hooks/use-clipboard\",\"index\":100,\"group\":\"Utilities\"},{\"name\":\"useMediaQuery\",\"url\":\"/en-us/hooks/use-media-query\",\"index\":100,\"group\":\"Utilities\"}]},{\"name\":\"Development\",\"children\":[{\"name\":\"useTheme\",\"url\":\"/en-us/hooks/use-theme\",\"index\":100,\"group\":\"Development\"},{\"name\":\"useCurrentState\",\"url\":\"/en-us/hooks/use-current-state\",\"index\":101,\"group\":\"Development\"},{\"name\":\"useScale\",\"url\":\"/en-us/hooks/use-scale\",\"index\":103,\"group\":\"Development\"},{\"name\":\"useClasses\",\"url\":\"/en-us/hooks/use-classes\",\"index\":104,\"group\":\"Development\"}]}]}]\n"
  },
  {
    "path": "lib/data/metadata-zh-cn.json",
    "content": "[{\"name\":\"guide\",\"children\":[{\"name\":\"快速上手\",\"children\":[{\"name\":\"什么是 Geist UI\",\"url\":\"/zh-cn/guide/introduction\",\"index\":5,\"group\":\"快速上手\"},{\"name\":\"安装\",\"url\":\"/zh-cn/guide/installation\",\"index\":10,\"group\":\"快速上手\"},{\"name\":\"构建体积\",\"url\":\"/zh-cn/guide/bundle-size\",\"index\":11,\"group\":\"快速上手\"},{\"name\":\"服务端渲染\",\"url\":\"/zh-cn/guide/server-render\",\"index\":15,\"group\":\"快速上手\"}]},{\"name\":\"定制化\",\"children\":[{\"name\":\"色彩\",\"url\":\"/zh-cn/guide/colors\",\"index\":5,\"group\":\"定制化\"},{\"name\":\"主题\",\"url\":\"/zh-cn/guide/themes\",\"index\":10,\"group\":\"定制化\"},{\"name\":\"可伸缩性\",\"url\":\"/zh-cn/guide/scale\",\"index\":20,\"group\":\"定制化\"}]}],\"localeName\":\"上手指南\"},{\"name\":\"components\",\"children\":[{\"name\":\"通用\",\"children\":[{\"name\":\"文本 Text\",\"url\":\"/zh-cn/components/text\",\"index\":10,\"group\":\"通用\"},{\"name\":\"按钮 Button\",\"url\":\"/zh-cn/components/button\",\"index\":100,\"group\":\"通用\"},{\"name\":\"代码 Code\",\"url\":\"/zh-cn/components/code\",\"index\":100,\"group\":\"通用\"},{\"name\":\"图标 Icons\",\"url\":\"/zh-cn/components/icons\",\"index\":100,\"group\":\"通用\"}]},{\"name\":\"布局\",\"children\":[{\"name\":\"栅格 Grid\",\"url\":\"/zh-cn/components/grid\",\"index\":100,\"group\":\"布局\"},{\"name\":\"页面 Page\",\"url\":\"/zh-cn/components/page\",\"index\":100,\"group\":\"布局\"},{\"name\":\"间距 Spacer\",\"url\":\"/zh-cn/components/spacer\",\"index\":100,\"group\":\"布局\"}]},{\"name\":\"表面\",\"children\":[{\"name\":\"卡片 Card\",\"url\":\"/zh-cn/components/card\",\"index\":100,\"group\":\"表面\"},{\"name\":\"折叠框 Collapse\",\"url\":\"/zh-cn/components/collapse\",\"index\":100,\"group\":\"表面\"},{\"name\":\"控件组 Fieldset\",\"url\":\"/zh-cn/components/fieldset\",\"index\":100,\"group\":\"表面\"}]},{\"name\":\"数据录入\",\"children\":[{\"name\":\"按钮组 Button Group\",\"url\":\"/zh-cn/components/button-group\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"复选框 Checkbox\",\"url\":\"/zh-cn/components/checkbox\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"输入框 Input\",\"url\":\"/zh-cn/components/input\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"单选框 Radio\",\"url\":\"/zh-cn/components/radio\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"选择器 Select\",\"url\":\"/zh-cn/components/select\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"滑动输入 Slider\",\"url\":\"/zh-cn/components/slider\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"文本输入框 Textarea\",\"url\":\"/zh-cn/components/textarea\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"开关 Toggle\",\"url\":\"/zh-cn/components/toggle\",\"index\":100,\"group\":\"数据录入\"},{\"name\":\"自动完成 Autocomplete\",\"url\":\"/zh-cn/components/auto-complete\",\"index\":104,\"group\":\"数据录入\"}]},{\"name\":\"数据展示\",\"children\":[{\"name\":\"头像 Avatar\",\"url\":\"/zh-cn/components/avatar\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"徽章 Badge\",\"url\":\"/zh-cn/components/badge\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"容量 Capacity\",\"url\":\"/zh-cn/components/capacity\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"描述 Description\",\"url\":\"/zh-cn/components/description\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"陈列框 Display\",\"url\":\"/zh-cn/components/display\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"点 Dot\",\"url\":\"/zh-cn/components/dot\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"文件树 File Tree\",\"url\":\"/zh-cn/components/file-tree\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"图片 Image\",\"url\":\"/zh-cn/components/image\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"键盘 keyboard\",\"url\":\"/zh-cn/components/keyboard\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"气泡卡片 Popover\",\"url\":\"/zh-cn/components/popover\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"表格 Table\",\"url\":\"/zh-cn/components/table\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"标签 Tag\",\"url\":\"/zh-cn/components/tag\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"文字提示 Tooltip\",\"url\":\"/zh-cn/components/tooltip\",\"index\":100,\"group\":\"数据展示\"},{\"name\":\"用户 User\",\"url\":\"/zh-cn/components/user\",\"index\":100,\"group\":\"数据展示\"}]},{\"name\":\"反馈\",\"children\":[{\"name\":\"抽屉 Drawer\",\"url\":\"/zh-cn/components/drawer\",\"index\":100,\"group\":\"反馈\"},{\"name\":\"加载中 Loading\",\"url\":\"/zh-cn/components/loading\",\"index\":100,\"group\":\"反馈\"},{\"name\":\"对话框 Modal\",\"url\":\"/zh-cn/components/modal\",\"index\":100,\"group\":\"反馈\"},{\"name\":\"提示 Note\",\"url\":\"/zh-cn/components/note\",\"index\":100,\"group\":\"反馈\"},{\"name\":\"进度条 Progress\",\"url\":\"/zh-cn/components/progress\",\"index\":100,\"group\":\"反馈\"},{\"name\":\"评分 Rating\",\"url\":\"/zh-cn/components/rating\",\"index\":100,\"group\":\"反馈\"},{\"name\":\"指示器 Spinner\",\"url\":\"/zh-cn/components/spinner\",\"index\":100,\"group\":\"反馈\"},{\"name\":\"通知 Toast\",\"url\":\"/zh-cn/components/toast\",\"index\":100,\"group\":\"反馈\"}]},{\"name\":\"导航\",\"children\":[{\"name\":\"面包屑 Breadcrumbs\",\"url\":\"/zh-cn/components/breadcrumbs\",\"index\":100,\"group\":\"导航\"},{\"name\":\"链接 Link\",\"url\":\"/zh-cn/components/link\",\"index\":100,\"group\":\"导航\"},{\"name\":\"分页 Pagination\",\"url\":\"/zh-cn/components/pagination\",\"index\":100,\"group\":\"导航\"},{\"name\":\"选项卡 Tabs\",\"url\":\"/zh-cn/components/tabs\",\"index\":100,\"group\":\"导航\"},{\"name\":\"下拉按钮 Btn Dropdown\",\"url\":\"/zh-cn/components/button-dropdown\",\"index\":105,\"group\":\"导航\"}]},{\"name\":\"其他\",\"children\":[{\"name\":\"分割线 Divider\",\"url\":\"/zh-cn/components/divider\",\"index\":100,\"group\":\"其他\"},{\"name\":\"片段 Snippet\",\"url\":\"/zh-cn/components/snippet\",\"index\":100,\"group\":\"其他\"}]}],\"localeName\":\"所有组件\"},{\"name\":\"hooks\",\"children\":[{\"name\":\"组件增强\",\"children\":[{\"name\":\"键盘事件 useKeyboard\",\"url\":\"/zh-cn/hooks/use-keyboard\",\"index\":5,\"group\":\"组件增强\"},{\"name\":\"输入框绑定 useInput\",\"url\":\"/zh-cn/hooks/use-input\",\"index\":10,\"group\":\"组件增强\"},{\"name\":\"对话框绑定 useModal\",\"url\":\"/zh-cn/hooks/use-modal\",\"index\":11,\"group\":\"组件增强\"},{\"name\":\"选项卡绑定 useTabs\",\"url\":\"/zh-cn/hooks/use-tabs\",\"index\":11,\"group\":\"组件增强\"},{\"name\":\"通知 useToast\",\"url\":\"/zh-cn/hooks/use-toast\",\"index\":12,\"group\":\"组件增强\"}]},{\"name\":\"实用工具\",\"children\":[{\"name\":\"锁定滚动 useBodyScroll\",\"url\":\"/zh-cn/hooks/use-body-scroll\",\"index\":100,\"group\":\"实用工具\"},{\"name\":\"点击他处 useClickAway\",\"url\":\"/zh-cn/hooks/use-click-away\",\"index\":100,\"group\":\"实用工具\"},{\"name\":\"剪切板 useClipboard\",\"url\":\"/zh-cn/hooks/use-clipboard\",\"index\":100,\"group\":\"实用工具\"},{\"name\":\"媒体查询 useMediaQuery\",\"url\":\"/zh-cn/hooks/use-media-query\",\"index\":100,\"group\":\"实用工具\"}]},{\"name\":\"开发者\",\"children\":[{\"name\":\"主题的状态 useTheme\",\"url\":\"/zh-cn/hooks/use-theme\",\"index\":100,\"group\":\"开发者\"},{\"name\":\"当前值 useCurrentState\",\"url\":\"/zh-cn/hooks/use-current-state\",\"index\":101,\"group\":\"开发者\"},{\"name\":\"自定义缩放 useScale\",\"url\":\"/zh-cn/hooks/use-scale\",\"index\":103,\"group\":\"开发者\"},{\"name\":\"类名合并 useClasses\",\"url\":\"/zh-cn/hooks/use-classes\",\"index\":105,\"group\":\"开发者\"}]}]}]\n"
  },
  {
    "path": "lib/data/seeds-en-us.json",
    "content": "[{\"name\":\"AutoComplete\",\"url\":\"/en-us/components/auto-complete\",\"group\":\"Data Entry\"},{\"name\":\"Avatar\",\"url\":\"/en-us/components/avatar\",\"group\":\"Data Display\"},{\"name\":\"Badge\",\"url\":\"/en-us/components/badge\",\"group\":\"Data Display\"},{\"name\":\"Breadcrumbs\",\"url\":\"/en-us/components/breadcrumbs\",\"group\":\"Navigation\"},{\"name\":\"Button Dropdown\",\"url\":\"/en-us/components/button-dropdown\",\"group\":\"Navigation\"},{\"name\":\"Button Group\",\"url\":\"/en-us/components/button-group\",\"group\":\"Data Entry\"},{\"name\":\"Button\",\"url\":\"/en-us/components/button\",\"group\":\"General\"},{\"name\":\"Capacity\",\"url\":\"/en-us/components/capacity\",\"group\":\"Data Display\"},{\"name\":\"Card\",\"url\":\"/en-us/components/card\",\"group\":\"Surfaces\"},{\"name\":\"Checkbox\",\"url\":\"/en-us/components/checkbox\",\"group\":\"Data Entry\"},{\"name\":\"Code\",\"url\":\"/en-us/components/code\",\"group\":\"General\"},{\"name\":\"Collapse\",\"url\":\"/en-us/components/collapse\",\"group\":\"Surfaces\"},{\"name\":\"Description\",\"url\":\"/en-us/components/description\",\"group\":\"Data Display\"},{\"name\":\"Display\",\"url\":\"/en-us/components/display\",\"group\":\"Data Display\"},{\"name\":\"Divider\",\"url\":\"/en-us/components/divider\",\"group\":\"Others\"},{\"name\":\"Dot\",\"url\":\"/en-us/components/dot\",\"group\":\"Data Display\"},{\"name\":\"Drawer\",\"url\":\"/en-us/components/drawer\",\"group\":\"Feedback\"},{\"name\":\"Fieldset\",\"url\":\"/en-us/components/fieldset\",\"group\":\"Surfaces\"},{\"name\":\"File Tree\",\"url\":\"/en-us/components/file-tree\",\"group\":\"Data Display\"},{\"name\":\"Grid\",\"url\":\"/en-us/components/grid\",\"group\":\"Layout\"},{\"name\":\"Icons\",\"url\":\"/en-us/components/icons\",\"group\":\"General\"},{\"name\":\"Image\",\"url\":\"/en-us/components/image\",\"group\":\"Data Display\"},{\"name\":\"Input\",\"url\":\"/en-us/components/input\",\"group\":\"Data Entry\"},{\"name\":\"Keyboard\",\"url\":\"/en-us/components/keyboard\",\"group\":\"Data Display\"},{\"name\":\"Link\",\"url\":\"/en-us/components/link\",\"group\":\"Navigation\"},{\"name\":\"Loading\",\"url\":\"/en-us/components/loading\",\"group\":\"Feedback\"},{\"name\":\"Modal\",\"url\":\"/en-us/components/modal\",\"group\":\"Feedback\"},{\"name\":\"Note\",\"url\":\"/en-us/components/note\",\"group\":\"Feedback\"},{\"name\":\"Page\",\"url\":\"/en-us/components/page\",\"group\":\"Layout\"},{\"name\":\"Pagination\",\"url\":\"/en-us/components/pagination\",\"group\":\"Navigation\"},{\"name\":\"Popover\",\"url\":\"/en-us/components/popover\",\"group\":\"Data Display\"},{\"name\":\"Progress\",\"url\":\"/en-us/components/progress\",\"group\":\"Feedback\"},{\"name\":\"Radio\",\"url\":\"/en-us/components/radio\",\"group\":\"Data Entry\"},{\"name\":\"Rating\",\"url\":\"/en-us/components/rating\",\"group\":\"Feedback\"},{\"name\":\"Select\",\"url\":\"/en-us/components/select\",\"group\":\"Data Entry\"},{\"name\":\"Slider\",\"url\":\"/en-us/components/slider\",\"group\":\"Data Entry\"},{\"name\":\"Snippet\",\"url\":\"/en-us/components/snippet\",\"group\":\"Others\"},{\"name\":\"Spacer\",\"url\":\"/en-us/components/spacer\",\"group\":\"Layout\"},{\"name\":\"Spinner\",\"url\":\"/en-us/components/spinner\",\"group\":\"Feedback\"},{\"name\":\"Table\",\"url\":\"/en-us/components/table\",\"group\":\"Data Display\"},{\"name\":\"Tabs\",\"url\":\"/en-us/components/tabs\",\"group\":\"Navigation\"},{\"name\":\"Tag\",\"url\":\"/en-us/components/tag\",\"group\":\"Data Display\"},{\"name\":\"Text\",\"url\":\"/en-us/components/text\",\"group\":\"General\"},{\"name\":\"Textarea\",\"url\":\"/en-us/components/textarea\",\"group\":\"Data Entry\"},{\"name\":\"Toast\",\"url\":\"/en-us/components/toast\",\"group\":\"Feedback\"},{\"name\":\"Toggle\",\"url\":\"/en-us/components/toggle\",\"group\":\"Data Entry\"},{\"name\":\"Tooltip\",\"url\":\"/en-us/components/tooltip\",\"group\":\"Data Display\"},{\"name\":\"User\",\"url\":\"/en-us/components/user\",\"group\":\"Data Display\"},{\"name\":\"Bundle Size\",\"url\":\"/en-us/guide/bundle-size\",\"group\":\"Getting Started\"},{\"name\":\"Colors\",\"url\":\"/en-us/guide/colors\",\"group\":\"Customization\"},{\"name\":\"Installation\",\"url\":\"/en-us/guide/installation\",\"group\":\"Getting Started\"},{\"name\":\"Introduction\",\"url\":\"/en-us/guide/introduction\",\"group\":\"Getting Started\"},{\"name\":\"Scale\",\"url\":\"/en-us/guide/scale\",\"group\":\"Customization\"},{\"name\":\"Server Render\",\"url\":\"/en-us/guide/server-render\",\"group\":\"Getting Started\"},{\"name\":\"Themes\",\"url\":\"/en-us/guide/themes\",\"group\":\"Customization\"},{\"name\":\"useBodyScroll\",\"url\":\"/en-us/hooks/use-body-scroll\",\"group\":\"Utilities\"},{\"name\":\"useClasses\",\"url\":\"/en-us/hooks/use-classes\",\"group\":\"Development\"},{\"name\":\"useClickAway\",\"url\":\"/en-us/hooks/use-click-away\",\"group\":\"Utilities\"},{\"name\":\"useClipboard\",\"url\":\"/en-us/hooks/use-clipboard\",\"group\":\"Utilities\"},{\"name\":\"useCurrentState\",\"url\":\"/en-us/hooks/use-current-state\",\"group\":\"Development\"},{\"name\":\"useInput\",\"url\":\"/en-us/hooks/use-input\",\"group\":\"Enhancement\"},{\"name\":\"useKeyboard\",\"url\":\"/en-us/hooks/use-keyboard\",\"group\":\"Enhancement\"},{\"name\":\"useMediaQuery\",\"url\":\"/en-us/hooks/use-media-query\",\"group\":\"Utilities\"},{\"name\":\"useModal\",\"url\":\"/en-us/hooks/use-modal\",\"group\":\"Enhancement\"},{\"name\":\"useScale\",\"url\":\"/en-us/hooks/use-scale\",\"group\":\"Development\"},{\"name\":\"useTabs\",\"url\":\"/en-us/hooks/use-tabs\",\"group\":\"Enhancement\"},{\"name\":\"useTheme\",\"url\":\"/en-us/hooks/use-theme\",\"group\":\"Development\"},{\"name\":\"useToast\",\"url\":\"/en-us/hooks/use-toast\",\"group\":\"Enhancement\"},{\"name\":\"Getting Started\",\"url\":\"https://codesandbox.io/s/geist-ui-n21e9\",\"group\":\"Codesandbox\"},{\"name\":\"With TypeScript\",\"url\":\"https://codesandbox.io/s/geist-ui-typescript-65td1\",\"group\":\"Codesandbox\"},{\"name\":\"Discussions\",\"url\":\"https://github.com/geist-org/geist-ui/discussions\",\"group\":\"External\"},{\"name\":\"Example projects\",\"url\":\"https://github.com/geist-org/geist-ui/tree/master/examples\",\"group\":\"External\"},{\"name\":\"Create issue\",\"url\":\"https://github.com/geist-org/geist-ui/issues/new/choose\",\"group\":\"External\"},{\"name\":\"Release Note\",\"url\":\"https://github.com/geist-org/geist-ui/releases\",\"group\":\"External\"},{\"name\":\"Join Slack\",\"url\":\"https://github.com/geist-org/geist-ui/discussions/572\",\"group\":\"External\"},{\"name\":\"License\",\"url\":\"https://github.com/geist-org/geist-ui/blob/master/LICENSE\",\"group\":\"External\"},{\"name\":\"Canary Documentation\",\"url\":\"https://rc.geist-ui.dev/\",\"group\":\"External\"},{\"name\":\"Canary Releases\",\"url\":\"https://github.com/geist-org/geist-ui/releases?q=canary&expanded=true\",\"group\":\"External\"}]\n"
  },
  {
    "path": "lib/data/seeds-zh-cn.json",
    "content": "[{\"name\":\"自动完成 Autocomplete\",\"url\":\"/zh-cn/components/auto-complete\",\"group\":\"数据录入\"},{\"name\":\"头像 Avatar\",\"url\":\"/zh-cn/components/avatar\",\"group\":\"数据展示\"},{\"name\":\"徽章 Badge\",\"url\":\"/zh-cn/components/badge\",\"group\":\"数据展示\"},{\"name\":\"面包屑 Breadcrumbs\",\"url\":\"/zh-cn/components/breadcrumbs\",\"group\":\"导航\"},{\"name\":\"下拉按钮 Btn Dropdown\",\"url\":\"/zh-cn/components/button-dropdown\",\"group\":\"导航\"},{\"name\":\"按钮组 Button Group\",\"url\":\"/zh-cn/components/button-group\",\"group\":\"数据录入\"},{\"name\":\"按钮 Button\",\"url\":\"/zh-cn/components/button\",\"group\":\"通用\"},{\"name\":\"容量 Capacity\",\"url\":\"/zh-cn/components/capacity\",\"group\":\"数据展示\"},{\"name\":\"卡片 Card\",\"url\":\"/zh-cn/components/card\",\"group\":\"表面\"},{\"name\":\"复选框 Checkbox\",\"url\":\"/zh-cn/components/checkbox\",\"group\":\"数据录入\"},{\"name\":\"代码 Code\",\"url\":\"/zh-cn/components/code\",\"group\":\"通用\"},{\"name\":\"折叠框 Collapse\",\"url\":\"/zh-cn/components/collapse\",\"group\":\"表面\"},{\"name\":\"描述 Description\",\"url\":\"/zh-cn/components/description\",\"group\":\"数据展示\"},{\"name\":\"陈列框 Display\",\"url\":\"/zh-cn/components/display\",\"group\":\"数据展示\"},{\"name\":\"分割线 Divider\",\"url\":\"/zh-cn/components/divider\",\"group\":\"其他\"},{\"name\":\"点 Dot\",\"url\":\"/zh-cn/components/dot\",\"group\":\"数据展示\"},{\"name\":\"抽屉 Drawer\",\"url\":\"/zh-cn/components/drawer\",\"group\":\"反馈\"},{\"name\":\"控件组 Fieldset\",\"url\":\"/zh-cn/components/fieldset\",\"group\":\"表面\"},{\"name\":\"文件树 File Tree\",\"url\":\"/zh-cn/components/file-tree\",\"group\":\"数据展示\"},{\"name\":\"栅格 Grid\",\"url\":\"/zh-cn/components/grid\",\"group\":\"布局\"},{\"name\":\"图标 Icons\",\"url\":\"/zh-cn/components/icons\",\"group\":\"通用\"},{\"name\":\"图片 Image\",\"url\":\"/zh-cn/components/image\",\"group\":\"数据展示\"},{\"name\":\"输入框 Input\",\"url\":\"/zh-cn/components/input\",\"group\":\"数据录入\"},{\"name\":\"键盘 keyboard\",\"url\":\"/zh-cn/components/keyboard\",\"group\":\"数据展示\"},{\"name\":\"链接 Link\",\"url\":\"/zh-cn/components/link\",\"group\":\"导航\"},{\"name\":\"加载中 Loading\",\"url\":\"/zh-cn/components/loading\",\"group\":\"反馈\"},{\"name\":\"对话框 Modal\",\"url\":\"/zh-cn/components/modal\",\"group\":\"反馈\"},{\"name\":\"提示 Note\",\"url\":\"/zh-cn/components/note\",\"group\":\"反馈\"},{\"name\":\"页面 Page\",\"url\":\"/zh-cn/components/page\",\"group\":\"布局\"},{\"name\":\"分页 Pagination\",\"url\":\"/zh-cn/components/pagination\",\"group\":\"导航\"},{\"name\":\"气泡卡片 Popover\",\"url\":\"/zh-cn/components/popover\",\"group\":\"数据展示\"},{\"name\":\"进度条 Progress\",\"url\":\"/zh-cn/components/progress\",\"group\":\"反馈\"},{\"name\":\"单选框 Radio\",\"url\":\"/zh-cn/components/radio\",\"group\":\"数据录入\"},{\"name\":\"评分 Rating\",\"url\":\"/zh-cn/components/rating\",\"group\":\"反馈\"},{\"name\":\"选择器 Select\",\"url\":\"/zh-cn/components/select\",\"group\":\"数据录入\"},{\"name\":\"滑动输入 Slider\",\"url\":\"/zh-cn/components/slider\",\"group\":\"数据录入\"},{\"name\":\"片段 Snippet\",\"url\":\"/zh-cn/components/snippet\",\"group\":\"其他\"},{\"name\":\"间距 Spacer\",\"url\":\"/zh-cn/components/spacer\",\"group\":\"布局\"},{\"name\":\"指示器 Spinner\",\"url\":\"/zh-cn/components/spinner\",\"group\":\"反馈\"},{\"name\":\"表格 Table\",\"url\":\"/zh-cn/components/table\",\"group\":\"数据展示\"},{\"name\":\"选项卡 Tabs\",\"url\":\"/zh-cn/components/tabs\",\"group\":\"导航\"},{\"name\":\"标签 Tag\",\"url\":\"/zh-cn/components/tag\",\"group\":\"数据展示\"},{\"name\":\"文本 Text\",\"url\":\"/zh-cn/components/text\",\"group\":\"通用\"},{\"name\":\"文本输入框 Textarea\",\"url\":\"/zh-cn/components/textarea\",\"group\":\"数据录入\"},{\"name\":\"通知 Toast\",\"url\":\"/zh-cn/components/toast\",\"group\":\"反馈\"},{\"name\":\"开关 Toggle\",\"url\":\"/zh-cn/components/toggle\",\"group\":\"数据录入\"},{\"name\":\"文字提示 Tooltip\",\"url\":\"/zh-cn/components/tooltip\",\"group\":\"数据展示\"},{\"name\":\"用户 User\",\"url\":\"/zh-cn/components/user\",\"group\":\"数据展示\"},{\"name\":\"构建体积\",\"url\":\"/zh-cn/guide/bundle-size\",\"group\":\"快速上手\"},{\"name\":\"色彩\",\"url\":\"/zh-cn/guide/colors\",\"group\":\"定制化\"},{\"name\":\"安装\",\"url\":\"/zh-cn/guide/installation\",\"group\":\"快速上手\"},{\"name\":\"什么是 Geist UI\",\"url\":\"/zh-cn/guide/introduction\",\"group\":\"快速上手\"},{\"name\":\"可伸缩性\",\"url\":\"/zh-cn/guide/scale\",\"group\":\"定制化\"},{\"name\":\"服务端渲染\",\"url\":\"/zh-cn/guide/server-render\",\"group\":\"快速上手\"},{\"name\":\"主题\",\"url\":\"/zh-cn/guide/themes\",\"group\":\"定制化\"},{\"name\":\"锁定滚动 useBodyScroll\",\"url\":\"/zh-cn/hooks/use-body-scroll\",\"group\":\"实用工具\"},{\"name\":\"类名合并 useClasses\",\"url\":\"/zh-cn/hooks/use-classes\",\"group\":\"开发者\"},{\"name\":\"点击他处 useClickAway\",\"url\":\"/zh-cn/hooks/use-click-away\",\"group\":\"实用工具\"},{\"name\":\"剪切板 useClipboard\",\"url\":\"/zh-cn/hooks/use-clipboard\",\"group\":\"实用工具\"},{\"name\":\"当前值 useCurrentState\",\"url\":\"/zh-cn/hooks/use-current-state\",\"group\":\"开发者\"},{\"name\":\"输入框绑定 useInput\",\"url\":\"/zh-cn/hooks/use-input\",\"group\":\"组件增强\"},{\"name\":\"键盘事件 useKeyboard\",\"url\":\"/zh-cn/hooks/use-keyboard\",\"group\":\"组件增强\"},{\"name\":\"媒体查询 useMediaQuery\",\"url\":\"/zh-cn/hooks/use-media-query\",\"group\":\"实用工具\"},{\"name\":\"对话框绑定 useModal\",\"url\":\"/zh-cn/hooks/use-modal\",\"group\":\"组件增强\"},{\"name\":\"自定义缩放 useScale\",\"url\":\"/zh-cn/hooks/use-scale\",\"group\":\"开发者\"},{\"name\":\"选项卡绑定 useTabs\",\"url\":\"/zh-cn/hooks/use-tabs\",\"group\":\"组件增强\"},{\"name\":\"主题的状态 useTheme\",\"url\":\"/zh-cn/hooks/use-theme\",\"group\":\"开发者\"},{\"name\":\"通知 useToast\",\"url\":\"/zh-cn/hooks/use-toast\",\"group\":\"组件增强\"},{\"name\":\"Getting Started\",\"url\":\"https://codesandbox.io/s/geist-ui-n21e9\",\"group\":\"Codesandbox\"},{\"name\":\"With TypeScript\",\"url\":\"https://codesandbox.io/s/geist-ui-typescript-65td1\",\"group\":\"Codesandbox\"},{\"name\":\"Discussions\",\"url\":\"https://github.com/geist-org/geist-ui/discussions\",\"group\":\"External\"},{\"name\":\"Example projects\",\"url\":\"https://github.com/geist-org/geist-ui/tree/master/examples\",\"group\":\"External\"},{\"name\":\"Create issue\",\"url\":\"https://github.com/geist-org/geist-ui/issues/new/choose\",\"group\":\"External\"},{\"name\":\"Release Note\",\"url\":\"https://github.com/geist-org/geist-ui/releases\",\"group\":\"External\"},{\"name\":\"Join Slack\",\"url\":\"https://github.com/geist-org/geist-ui/discussions/572\",\"group\":\"External\"},{\"name\":\"License\",\"url\":\"https://github.com/geist-org/geist-ui/blob/master/LICENSE\",\"group\":\"External\"},{\"name\":\"Canary Documentation\",\"url\":\"https://rc.geist-ui.dev/\",\"group\":\"External\"},{\"name\":\"Canary Releases\",\"url\":\"https://github.com/geist-org/geist-ui/releases?q=canary&expanded=true\",\"group\":\"External\"}]\n"
  },
  {
    "path": "lib/data/seeds.ts",
    "content": "import enUS from './seeds-en-us.json'\nimport zhCN from './seeds-zh-cn.json'\n\nexport type Seed = {\n  name: string\n  url: string\n  group?: string\n}\n\nexport type Seeds = Array<Seed>\n\nconst SEEDS = {\n  'en-us': enUS as Seeds,\n  'zh-cn': zhCN as Seeds,\n}\n\nexport default SEEDS\n"
  },
  {
    "path": "lib/redirect.tsx",
    "content": "import { NextPage } from 'next'\nimport Head from 'next/head'\nimport Router from 'next/router'\n\nexport interface Props {\n  metaRedirect?: boolean\n}\n\nconst redirect = (destination: string) => {\n  const Home: NextPage<Props> = ({ metaRedirect }) => {\n    if (!metaRedirect) return null\n    return (\n      <Head>\n        <meta httpEquiv=\"refresh\" content={`0; url=${destination}`} />\n      </Head>\n    )\n  }\n\n  Home.getInitialProps = async ({ res }): Promise<Props> => {\n    if (res) {\n      res.writeHead(302, { Location: destination })\n      res.end()\n      return {}\n    } else {\n      await Router.push(destination)\n    }\n\n    return { metaRedirect: true }\n  }\n\n  return Home\n}\n\nexport default redirect\n"
  },
  {
    "path": "lib/use-dom-clean.ts",
    "content": "import { useEffect } from 'react'\n\nconst useDomClean = (): void => {\n  useEffect(() => {\n    document.documentElement.removeAttribute('style')\n    document.body.removeAttribute('style')\n  }, [])\n}\n\nexport default useDomClean\n"
  },
  {
    "path": "lib/use-locale.ts",
    "content": "import { useRouter } from 'next/router'\nimport { useEffect } from 'react'\nimport useCurrentState from 'components/utils/use-current-state'\n\nconst DEFAULT_LOCALE = 'en-us'\nconst DEFAULT_TAB = ''\n\nexport type LocaleTypes = {\n  locale: string\n  tabbar: string\n}\n\nconst useLocale = (): LocaleTypes => {\n  const { pathname } = useRouter()\n  const [locale, setLocale, localeRef] = useCurrentState<string>(DEFAULT_LOCALE)\n  const [tabbar, setTab, tabRef] = useCurrentState<string>(DEFAULT_TAB)\n\n  useEffect(() => {\n    const names = pathname.split('/').filter(r => !!r)\n    const currentLocale = names[0] || DEFAULT_LOCALE\n    const currentTabbar = names[1] || DEFAULT_TAB\n\n    if (currentLocale !== localeRef.current) {\n      setLocale(currentLocale)\n    }\n\n    if (currentTabbar !== tabRef.current) {\n      setTab(currentTabbar)\n    }\n  }, [pathname])\n\n  return {\n    locale,\n    tabbar,\n  }\n}\n\nexport default useLocale\n"
  },
  {
    "path": "next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n"
  },
  {
    "path": "next.config.js",
    "content": "const withMDX = require('@next/mdx')({\n  extension: /\\.(md|mdx)?$/,\n  options: {\n    rehypePlugins: [require('@mapbox/rehype-prism'), require('rehype-join-line')],\n  },\n})\n\nconst withBundleAnalyzer = require('@next/bundle-analyzer')({\n  enabled: process.env.ANALYZE === 'true',\n})\n\nconst nextConfig = {\n  generateEtags: false,\n\n  poweredByHeader: false,\n\n  eslint: {\n    ignoreDuringBuilds: true,\n  },\n\n  pageExtensions: ['jsx', 'js', 'mdx', 'md', 'ts', 'tsx'],\n\n  cssModules: true,\n\n  cssLoaderOptions: {\n    importLoaders: 1,\n    localIdentName: '[local]___[hash:base64:5]',\n  },\n\n  env: {\n    VERSION: require('./package.json').version,\n  },\n\n  trailingSlash: false,\n\n  async redirects() {\n    return [\n      {\n        source: '/',\n        permanent: true,\n        destination: '/en-us',\n      },\n      {\n        source: '/icons',\n        permanent: true,\n        destination: '/en-us/components/icons',\n      },\n      {\n        source: '/en-us/customization',\n        destination: '/en-us',\n        permanent: true,\n      },\n      {\n        source: '/zh-cn/customization',\n        destination: '/zh-cn',\n        permanent: true,\n      },\n      {\n        source: '/en-us/guide/scaleable',\n        destination: '/en-us/guide/scale',\n        permanent: true,\n      },\n      {\n        source: '/zh-cn/guide/scaleable',\n        destination: '/zh-cn/guide/scale',\n        permanent: true,\n      },\n    ]\n  },\n}\n\nmodule.exports = withBundleAnalyzer(withMDX(nextConfig))\n"
  },
  {
    "path": "now.json",
    "content": "{\n  \"github\": {\n    \"silent\": true\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@geist-ui/core\",\n  \"version\": \"2.3.8\",\n  \"main\": \"dist/index.js\",\n  \"module\": \"esm/index.js\",\n  \"types\": \"esm/index.d.ts\",\n  \"unpkg\": \"dist/index.min.js\",\n  \"scripts\": {\n    \"dev\": \"yarn docs:collect && next dev\",\n    \"docs:start\": \"next start\",\n    \"docs:collect\": \"node scripts/collect-meta.js\",\n    \"docs:seeds\": \"node scripts/seeds/update.js\",\n    \"docs:build\": \"yarn docs:collect & yarn docs:seeds && next build\",\n    \"prettier\": \"prettier --write .\",\n    \"lint\": \"eslint \\\"{components,lib}/**/*.{js,ts,tsx}\\\"\",\n    \"test\": \"jest --config .jest.config.js --no-cache\",\n    \"test:update\": \"jest --config .jest.config.js --no-cache --update-snapshot\",\n    \"test:coverage\": \"yarn test --coverage\",\n    \"build:clear\": \"rm -rf ./dist ./esm\",\n    \"build:rollup\": \"rollup -c scripts/rollup.config.js\",\n    \"build:webpack\": \"webpack --config scripts/webpack.config.js\",\n    \"build:babel\": \"babel --no-babelrc --config-file ./scripts/babel.config.js --extensions \\\".js,.ts,.tsx\\\" ./components --out-dir ./esm --ignore \\\"**/__tests__/**/*,**/*.d.ts\\\"\",\n    \"build:after\": \"node scripts/move-built-in.js\",\n    \"build:types\": \"ttsc -p ./scripts & ttsc -p ./scripts --outDir ./esm\",\n    \"build\": \"yarn build:clear && yarn build:rollup && yarn build:babel && yarn build:types && yarn build:after\",\n    \"release\": \"yarn build && yarn publish --access public --non-interactive\"\n  },\n  \"license\": \"MIT\",\n  \"description\": \"Modern and minimalist React UI library.\",\n  \"homepage\": \"https://geist-ui.dev\",\n  \"bugs\": {\n    \"url\": \"https://github.com/geist-org/geist-ui/issues/new/choose\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/geist-org/geist-ui\"\n  },\n  \"prettier\": \"@geist-ui/prettier-config\",\n  \"keywords\": [\n    \"geist\",\n    \"geist ui\",\n    \"components\",\n    \"react components\",\n    \"react ui\"\n  ],\n  \"files\": [\n    \"/dist\",\n    \"/esm\"\n  ],\n  \"sideEffects\": false,\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.14.5\",\n    \"@babel/plugin-transform-runtime\": \"^7.14.5\",\n    \"@babel/preset-env\": \"^7.14.7\",\n    \"@babel/preset-react\": \"^7.14.5\",\n    \"@babel/preset-typescript\": \"^7.14.5\",\n    \"@geist-ui/icons\": \"^1.0.1\",\n    \"@geist-ui/prettier-config\": \"^1.0.1\",\n    \"@mapbox/rehype-prism\": \"^0.6.0\",\n    \"@mdx-js/loader\": \"^1.6.22\",\n    \"@mdx-js/react\": \"^1.6.22\",\n    \"@next/bundle-analyzer\": \"^12.0.10\",\n    \"@next/mdx\": \"^12.0.8\",\n    \"@rollup/plugin-commonjs\": \"^21.0.1\",\n    \"@rollup/plugin-node-resolve\": \"^13.1.3\",\n    \"@testing-library/dom\": \"^8.1.0\",\n    \"@testing-library/jest-dom\": \"^5.14.1\",\n    \"@testing-library/react-hooks\": \"^7.0.0\",\n    \"@testing-library/user-event\": \"^13.2.0\",\n    \"@types/enzyme\": \"^3.10.8\",\n    \"@types/jest\": \"^26.0.23\",\n    \"@types/react\": \"^17.0.38\",\n    \"@types/react-color\": \"^3.0.4\",\n    \"@types/react-dom\": \"^17.0.11\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.27.0\",\n    \"@typescript-eslint/parser\": \"^4.27.0\",\n    \"@wojtekmaj/enzyme-adapter-react-17\": \"^0.6.2\",\n    \"babel-jest\": \"^27.0.5\",\n    \"babel-plugin-transform-rename-import\": \"^2.3.0\",\n    \"css-mediaquery\": \"^0.1.2\",\n    \"enzyme\": \"^3.11.0\",\n    \"eslint\": \"^7.29.0\",\n    \"eslint-config-prettier\": \"^6.11.0\",\n    \"eslint-config-ts-lambdas\": \"^1.2.3\",\n    \"eslint-plugin-react\": \"^7.22.0\",\n    \"extract-mdx-metadata\": \"^1.0.0\",\n    \"fs-extra\": \"^10.0.0\",\n    \"jest\": \"^27.0.5\",\n    \"next\": \"^12.0.9-canary.0\",\n    \"prettier\": \"^2.3.1\",\n    \"react\": \"^17.0.2\",\n    \"react-color\": \"^2.19.3\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-live\": \"^2.2.3\",\n    \"rehype-join-line\": \"^1.0.2\",\n    \"rollup\": \"^2.64.0\",\n    \"rollup-plugin-babel\": \"^4.4.0\",\n    \"rollup-plugin-local-resolve\": \"^1.0.7\",\n    \"styled-jsx\": \"4.0.1\",\n    \"ts-jest\": \"^27.0.3\",\n    \"ttypescript\": \"^1.5.13\",\n    \"typescript\": \"^4.5.4\",\n    \"typescript-transform-paths\": \"^3.3.1\"\n  },\n  \"dependencies\": {\n    \"@babel/runtime\": \"^7.16.7\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.9.0\",\n    \"react-dom\": \">=16.9.0\"\n  }\n}\n"
  },
  {
    "path": "pages/_app.tsx",
    "content": "import Head from 'next/head'\nimport { NextPage } from 'next'\nimport { AppProps } from 'next/app'\nimport React, { useEffect, useState } from 'react'\nimport { MDXProvider } from '@mdx-js/react'\nimport { CssBaseline, GeistProvider, useTheme, GeistUIThemes, Image } from 'components'\nimport ConfigContext from 'lib/config-provider'\nimport useDomClean from 'lib/use-dom-clean'\nimport { HybridCode, HybridLink, Search } from 'lib/components'\nimport Menu from 'lib/components/layout/menu'\n\nconst Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {\n  const theme = useTheme()\n  const [themeType, setThemeType] = useState<string>()\n  const [customTheme, setCustomTheme] = useState<GeistUIThemes>(theme)\n  const themeChangeHandle = (theme: GeistUIThemes) => {\n    setCustomTheme(theme)\n    setThemeType(theme.type)\n  }\n\n  useEffect(() => {\n    const theme = window.localStorage.getItem('theme')\n    if (theme !== 'dark') return\n    setThemeType('dark')\n  }, [])\n  useDomClean()\n\n  return (\n    <>\n      <Head>\n        <title>Geist UI - Modern and minimalist React UI library</title>\n        <meta name=\"google\" content=\"notranslate\" />\n        <meta name=\"twitter:creator\" content=\"@echo_witt\" />\n        <meta name=\"referrer\" content=\"strict-origin\" />\n        <meta property=\"og:title\" content=\"Geist UI\" />\n        <meta property=\"og:site_name\" content=\"Geist UI\" />\n        <meta property=\"og:url\" content=\"https://geist-ui.dev\" />\n        <link rel=\"dns-prefetch\" href=\"//geist-ui.dev\" />\n        <meta name=\"twitter:card\" content=\"summary_large_image\" />\n        <meta name=\"generator\" content=\"Geist UI\" />\n        <meta\n          name=\"description\"\n          content=\"An open-source design system for building modern websites and applications.\"\n        />\n        <meta\n          property=\"og:description\"\n          content=\"An open-source design system for building modern websites and applications.\"\n        />\n        <meta\n          itemProp=\"image\"\n          property=\"og:image\"\n          content=\"https://user-images.githubusercontent.com/11304944/91128466-dfc96c00-e6da-11ea-8b03-a96e6b98667d.png\"\n        />\n        <meta\n          property=\"og:image\"\n          content=\"https://user-images.githubusercontent.com/11304944/91128466-dfc96c00-e6da-11ea-8b03-a96e6b98667d.png\"\n        />\n        <meta\n          property=\"twitter:image\"\n          content=\"https://user-images.githubusercontent.com/11304944/91128466-dfc96c00-e6da-11ea-8b03-a96e6b98667d.png\"\n        />\n        <meta\n          name=\"viewport\"\n          content=\"initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover\"\n        />\n      </Head>\n      <GeistProvider themeType={themeType} themes={[customTheme]}>\n        <CssBaseline />\n        <ConfigContext\n          onThemeChange={themeChangeHandle}\n          onThemeTypeChange={type => setThemeType(type)}>\n          <Menu />\n          <Search />\n          <MDXProvider\n            components={{\n              a: HybridLink,\n              img: Image,\n              pre: HybridCode,\n            }}>\n            <Component {...pageProps} />\n          </MDXProvider>\n        </ConfigContext>\n        <style global jsx>{`\n          .tag {\n            color: ${theme.palette.accents_5};\n          }\n          .punctuation {\n            color: ${theme.palette.accents_5};\n          }\n          .attr-name {\n            color: ${theme.palette.accents_6};\n          }\n          .attr-value {\n            color: ${theme.palette.accents_4};\n          }\n          .language-javascript {\n            color: ${theme.palette.accents_4};\n          }\n          span.class-name {\n            color: ${theme.palette.warning};\n          }\n          span.maybe-class-name {\n            color: ${theme.palette.purple};\n          }\n          span.token.string {\n            color: ${theme.palette.accents_5};\n          }\n          span.token.comment {\n            color: ${theme.palette.accents_3};\n          }\n          span.keyword {\n            color: ${theme.palette.success};\n          }\n          span.plain-text {\n            color: ${theme.palette.accents_3};\n          }\n          body::-webkit-scrollbar {\n            width: var(--geist-page-scrollbar-width);\n            background-color: ${theme.palette.accents_1};\n          }\n          body::-webkit-scrollbar-thumb {\n            background-color: ${theme.palette.accents_2};\n            border-radius: ${theme.layout.radius};\n          }\n          :root {\n            --geist-page-nav-height: 64px;\n            --geist-page-scrollbar-width: 4px;\n          }\n        `}</style>\n      </GeistProvider>\n    </>\n  )\n}\n\nexport default Application\n"
  },
  {
    "path": "pages/_document.tsx",
    "content": "import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'\nimport { CssBaseline } from 'components'\n\nclass MyDocument extends Document {\n  static async getInitialProps(ctx: DocumentContext) {\n    const initialProps = await Document.getInitialProps(ctx)\n    const styles = CssBaseline.flush()\n\n    return {\n      ...initialProps,\n      styles: (\n        <>\n          {initialProps.styles}\n          {styles}\n        </>\n      ),\n    }\n  }\n\n  render() {\n    return (\n      <Html>\n        <Head />\n        <body>\n          <script\n            dangerouslySetInnerHTML={{\n              __html: `\n            (function(){\n              if (!window.localStorage) return;\n              if (window.localStorage.getItem('theme') === 'dark') {\n                document.documentElement.style.background = '#000';\n                document.body.style.background = '#000';\n              };\n            })()\n          `,\n            }}\n          />\n          <Main />\n          <NextScript />\n          <script\n            async\n            src=\"https://www.googletagmanager.com/gtag/js?id=UA-110371817-12\"\n          />\n          <script\n            async\n            dangerouslySetInnerHTML={{\n              __html: `\n              window.dataLayer = window.dataLayer || [];\n              function gtag(){dataLayer.push(arguments);}\n              gtag('js', new Date());\n              gtag('config', 'UA-110371817-12');\n              `,\n            }}\n          />\n        </body>\n      </Html>\n    )\n  }\n}\n\nexport default MyDocument\n"
  },
  {
    "path": "pages/en-us/components/auto-complete.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { AutoComplete, Spacer, Badge, Grid, Text, Code } from 'components'\nimport { useState, useRef, useEffect } from 'react'\n\nexport const meta = {\n  title: 'AutoComplete',\n  group: 'Data Entry',\n}\n\n## Auto Complete\n\nAutoComplete control of input field.\n\n<Playground\n  desc=\"Basic usage, add autocomplete list for all inputs.\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete placeholder=\"Enter here\" options={options} />\n}\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Express state in different colors.\"\n  scope={{ AutoComplete, Spacer }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return (<>\n    <AutoComplete type=\"success\" placeholder=\"Enter here\" options={options} />\n    <Spacer h={.5} />\n    <AutoComplete type=\"warning\" placeholder=\"Enter here\" options={options} />\n    <Spacer h={.5} />\n    <AutoComplete type=\"error\" placeholder=\"Enter here\" options={options} />\n  </>)\n}\n`}\n/>\n\n<Playground\n  desc=\"Disable all.\"\n  title=\"disabled\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete disabled options={options} initialValue=\"London\" />\n}\n`}\n/>\n\n<Playground\n  title=\"Only allow selected\"\n  desc=\"You can only change the value of the input by select.\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete disableFreeSolo options={options} initialValue=\"sydney\" />\n}\n`}\n/>\n\n<Playground\n  desc=\"Update the contents of drop-down list based on input.\"\n  title=\"search\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = React.useState()\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    setOptions(relatedOptions)\n  }\n  return <AutoComplete options={options} placeholder=\"Enter here\" onSearch={searchHandler} />\n}\n`}\n/>\n\n<Playground\n  title=\"Waiting in search\"\n  desc=\"Show friendly tips and UI when searching.\"\n  scope={{ AutoComplete, useState, useEffect, useRef }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = useState()\n  const [searching, setSearching] = useState(false)\n  const timer = useRef()\n  // triggered every time input\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    setSearching(true)\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    // this is mock async request\n    // you can get data in any way\n    timer.current && clearTimeout(timer.current)\n    timer.current = setTimeout(() => {\n      setOptions(relatedOptions)\n      setSearching(false)\n      clearTimeout(timer.current)\n    }, 1000)\n  }\n  return (\n    <AutoComplete searching={searching}\n      options={options}\n      placeholder=\"Enter here\"\n      onSearch={searchHandler} />\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"custom searching text\"\n  desc=\"You can replace the default waiting text with any components.\"\n  scope={{ AutoComplete }}\n  code={`\n<AutoComplete searching placeholder=\"Enter here\" width=\"100%\">\n  <AutoComplete.Searching>\n    <span style={{ color: 'red' }}>waiting...</span>\n  </AutoComplete.Searching>\n</AutoComplete>\n`}\n/>\n\n<Playground\n  title=\"custom no options\"\n  desc=\"You can also customize the prompt with no options.\"\n  scope={{ AutoComplete, useState }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = useState()\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    setOptions(relatedOptions)\n  }\n  return (\n    <AutoComplete placeholder=\"Enter here\" width=\"100%\" options={options} onSearch={searchHandler}>\n      <AutoComplete.Empty>\n        <span>no options...</span>\n      </AutoComplete.Empty>\n    </AutoComplete>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"custom option\"\n  desc=\"You can rewrite each item of the `AutoComplete` to express more.\"\n  scope={{ AutoComplete, useState, Text, Badge, Grid }}\n  code={`\n() => {\n  const makeOption = (label, value) => (\n    <AutoComplete.Option value={value}>\n      <Grid.Container style={{ padding: '10pt 0' }}>\n        <Grid xs={24}><Text span b font=\"1.2rem\">Recent search results </Text></Grid>\n        <Grid.Container xs={24}>\n          <Grid xs><Text span>{label}</Text></Grid>\n          <Grid xs={4}><Badge type=\"success\">Recommended</Badge></Grid>\n        </Grid.Container>\n      </Grid.Container>\n    </AutoComplete.Option>\n  )\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = useState()\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    const customOptions = relatedOptions.map(({ label, value }) => makeOption(label, value))\n    setOptions(customOptions)\n  }\n  return (\n    <AutoComplete placeholder=\"Enter here\"\n      width=\"100%\"\n      options={options}\n      onSearch={searchHandler} />\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"clearable\"\n  desc=\"Add a clear button in the input box.\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete placeholder=\"Enter here\" clearable options={options} />\n}\n`}\n/>\n\n<Playground\n  title=\"Creatable\"\n  desc=\"Add an entry to be selected for any value.\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = React.useState()\n  const searchHandler = (currentValue) => {\n    const createOptions = [{\n      value: currentValue, label: 'Add \"' + currentValue + '\"'\n    }]\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    const optionsWithCreatable = relatedOptions.length !== 0 ? relatedOptions : createOptions\n    setOptions(optionsWithCreatable)\n  }\n  return <AutoComplete options={options} clearable disableFreeSolo placeholder=\"Enter here\" onSearch={searchHandler} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/auto-complete.mdx\">\n<Attributes.Title>AutoComplete.Props</Attributes.Title>\n\n| Attribute             | Description                                           | Type                                           | Accepted values                                  | Default   |\n| --------------------- | ----------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------ | --------- |\n| **options**           | options of input                                      | `AutoCompleteOptions`                          | [AutoCompleteOptions](#type-autocompleteoptions) | -         |\n| **type**              | input type                                            | `AutoCompleteTypes`                            | [AutoCompleteTypes](#autocompletetypes)          | `default` |\n| **initialValue**      | initial value                                         | `string`                                       | -                                                | -         |\n| **value**             | current value                                         | `string`                                       | -                                                | -         |\n| **width**             | container width                                       | `string`                                       | -                                                | -         |\n| **clearable**         | show clear icon                                       | `boolean`                                      | -                                                | `false`   |\n| **searching**         | show loading icon for search                          | `boolean`                                      | -                                                | `false`   |\n| **onChange**          | value of input is changed                             | `(value: string) => void`                      | -                                                | -         |\n| **onSearch**          | called when searching items                           | `(value: string) => void`                      | -                                                | -         |\n| **onSelect**          | called when a option is selected                      | `(value: string) => void`                      | -                                                | -         |\n| **dropdownClassName** | className of dropdown box                             | `string`                                       | -                                                | -         |\n| **dropdownStyle**     | style of dropdown box                                 | `object`                                       | -                                                | -         |\n| **disableMatchWidth** | disable Option from follow parent width               | `boolean`                                      | -                                                | `false`   |\n| **disableFreeSolo**   | only values can be changed through Select             | `boolean`                                      | -                                                | `false`   |\n| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement`                            | -                                                | `body`    |\n| **ref**               | forwardRef                                            | <Code>Ref<HTMLInputElement &#124; null></Code> | -                                                | -         |\n| ...                   | native props                                          | `InputHTMLAttributes`                          | `'id', ...`                                      | -         |\n\n<Attributes.Title alias=\"AutoComplete.Option\">AutoComplete.Item</Attributes.Title>\n\n| Attribute | Description          | Type             | Accepted values          | Default |\n| --------- | -------------------- | ---------------- | ------------------------ | ------- |\n| **value** | a unique ident value | `string`         | -                        | -       |\n| ...       | native props         | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>AutoComplete.Searching</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>AutoComplete.Empty</Attributes.Title>\n\n| Attribute | Description    | Type             | Accepted values          | Default |\n| --------- | -------------- | ---------------- | ------------------------ | ------- |\n| hidden    | hide empty box | `boolean`        | -                        | `false` |\n| ...       | native props   | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>type AutoCompleteOptions</Attributes.Title>\n\n```ts\nArray<{\n  label: string\n  value: string\n} | AutoComplete.Item>\n```\n\n<Attributes.Title>AutoCompleteTypes</Attributes.Title>\n\n```ts\ntype AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/avatar.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Avatar, Spacer } from 'components'\n\nexport const meta = {\n  title: 'Avatar',\n  group: 'Data Display',\n}\n\n## Avatar\n\nAvatars represent a user or a team. Stacked avatars represent a group of people.\n\n<Playground\n  desc=\"The `Avatar` contains circle and square.\"\n  scope={{ Avatar, Spacer }}\n  code={`\n() => {\n  const url = '/images/avatar.png'\n  return (\n    <>\n      <Avatar src={url} />\n      <Avatar src={url} />\n      <Avatar src={url} />\n      <Avatar src={url} />\n      <Spacer h={.5} />\n      <Avatar src={url} isSquare />\n      <Avatar src={url} isSquare />\n      <Avatar src={url} isSquare />\n      <Avatar src={url} isSquare />\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Text\"\n  desc=\"Display text in the avatar box.\"\n  scope={{ Avatar }}\n  code={`\n<>\n  <Avatar text=\"W\" />\n  <Avatar text=\"A\" />\n  <Avatar text=\"W\" />\n  <Avatar text=\"Joe\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"Group\"\n  desc=\"Multiple avatars can overlap and stack together.\"\n  scope={{ Avatar, Spacer }}\n  code={`\n() => {\n  const url = '/images/avatar.png'\n  return (\n    <>\n      <Avatar.Group>\n        <Avatar src={url} stacked />\n        <Avatar src={url} stacked />\n        <Avatar src={url} stacked />\n        <Avatar src={url} stacked />\n      </Avatar.Group>\n      <Spacer />\n      <Avatar.Group count={12}>\n        <Avatar src={url} stacked />\n        <Avatar text=\"W\" stacked />\n        <Avatar text=\"Ana\" stacked />\n      </Avatar.Group>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/avatar.mdx\">\n<Attributes.Title>Avatar.Props</Attributes.Title>\n\n| Attribute    | Description                        | Type                | Accepted values                          | Default |\n| ------------ | ---------------------------------- | ------------------- | ---------------------------------------- | ------- |\n| **src**      | image src                          | `string`            | -                                        | -       |\n| **stacked**  | stacked display group              | `boolean`           | -                                        | `false` |\n| **text**     | display text when image is missing | `string`            | -                                        | -       |\n| **isSquare** | avatar shape                       | `boolean`           | -                                        | `false` |\n| ...          | native props                       | `ImgHTMLAttributes` | `'alt', 'crossOrigin', 'className', ...` | -       |\n\n<Attributes.Title>Avatar.Group.Props</Attributes.Title>\n\n| Attribute | Description        | Type             | Accepted values                  | Default |\n| --------- | ------------------ | ---------------- | -------------------------------- | ------- |\n| **count** | show total members | `number`         | -                                | -       |\n| ...       | native props       | `HTMLAttributes` | `'id', 'name', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/badge.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Badge, Spacer, Avatar, Button, Link, useTheme } from 'components'\nimport NextLink from 'next/link'\n\nexport const meta = {\n  title: 'Badge',\n  group: 'Data Display',\n}\n\n## Badge\n\nDisplay an indicator that requires attention.\n\n<Playground\n  scope={{ Badge, Spacer }}\n  desc=\"Show number or text.\"\n  code={`\n  <>\n    <Badge>1</Badge> <Spacer h={.5} />\n    <Badge>50</Badge> <Spacer h={.5} />\n    <Badge>100</Badge> <Spacer h={.5} />\n    <Badge>2020</Badge>\n  </>\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Express state in different colors.\"\n  scope={{ Badge, Spacer }}\n  code={`\n  <>\n    <Badge type=\"success\">Success</Badge> <Spacer h={.5} />\n    <Badge type=\"warning\">Warning</Badge> <Spacer h={.5} />\n    <Badge type=\"error\">Error</Badge> <Spacer h={.5} />\n    <Badge type=\"secondary\">Secondary</Badge>\n  </>\n`}\n/>\n\n<Playground\n  title=\"Custom color\"\n  desc={\n    <>\n      For more colors, please refer to the{' '}\n      <NextLink href=\"/en-us/guide/colors\">\n        <Link color>color section</Link>\n      </NextLink>\n      .\n    </>\n  }\n  scope={{ Badge, Spacer, useTheme }}\n  code={`\n() => {\n  const theme = useTheme()\n  return (\n    <>\n      <Badge style={{ backgroundColor: theme.palette.successLight }}>Success Light</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.successDark }}>Success Dark</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.alert }}>Alert</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.purple }}>Purple</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.violet }}>Violet</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.cyanLighter, color: theme.palette.foreground }}>Cyan Lighter</Badge> <Spacer h={.5} />\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Anchor\"\n  desc=\"Fix the `Badge` in the designated position.\"\n  scope={{ Badge, Avatar, Spacer, Button, Link }}\n  code={`\n<>\n  <Badge.Anchor>\n    <Badge scale={0.5}>10</Badge>\n    <Avatar src=\"/images/avatar.png\" />\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor placement=\"bottomRight\">\n    <Badge scale={0.5} type=\"success\">10</Badge>\n    <Avatar scale={1.5} isSquare src=\"/images/avatar.png\" />\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor>\n    <Badge scale={0.5} type=\"warning\">99+</Badge>\n    <Button scale={0.5} auto>Action</Button>\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor>\n    <Badge scale={0.5} type=\"error\" dot />\n    <Link target=\"_blank\" href=\"https://github.com/geist-org/geist-ui/\">Geist UI</Link>\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor>\n    <Badge type=\"error\" dot padding=\"5px\" />\n    <Link target=\"_blank\" href=\"https://github.com/geist-org/geist-ui/\">Share Link</Link>\n  </Badge.Anchor>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/badge.mdx\">\n<Attributes.Title>Badge.Props</Attributes.Title>\n\n| Attribute | Description                 | Type             | Accepted values                 | Default   |\n| --------- | --------------------------- | ---------------- | ------------------------------- | --------- |\n| **type**  | badge type                  | `BadgeTypes`     | [BadgeTypes](#badgetypes)       | `default` |\n| **dot**   | show dot and ignore content | `boolean`        | -                               | `false`   |\n| ...       | native props                | `HTMLAttributes` | `'alt', 'id', 'className', ...` | -         |\n\n<Attributes.Title>Badge.Anchor.Props</Attributes.Title>\n\n| Attribute     | Description            | Type              | Accepted values                     | Default    |\n| ------------- | ---------------------- | ----------------- | ----------------------------------- | ---------- |\n| **placement** | fixe position of Badge | `AnchorPlacement` | [AnchorPlacement](#anchorplacement) | `topRight` |\n| ...           | native props           | `HTMLAttributes`  | `'alt', 'id', 'className', ...`     | -          |\n\n<Attributes.Title>BadgeTypes</Attributes.Title>\n\n```ts\ntype BadgeTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>AnchorPlacement</Attributes.Title>\n\n```ts\ntype AnchorPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/breadcrumbs.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Breadcrumbs, Spacer } from 'components'\nimport NextLink from 'next/link'\nimport Home from '@geist-ui/icons/home'\nimport Inbox from '@geist-ui/icons/inbox'\n\nexport const meta = {\n  title: 'Breadcrumbs',\n  group: 'Navigation',\n}\n\n## Breadcrumbs\n\nShow where users are in the application.\n\n<Playground\n  scope={{ Breadcrumbs }}\n  code={`\n<Breadcrumbs>\n  <Breadcrumbs.Item>Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"\">Catalog</Breadcrumbs.Item>\n  <Breadcrumbs.Item>Page</Breadcrumbs.Item>\n</Breadcrumbs>\n`}\n/>\n\n<Playground\n  title=\"Separator\"\n  desc=\"Custom separator in characters.\"\n  scope={{ Breadcrumbs, Spacer }}\n  code={`\n<>\n  <Breadcrumbs separator=\"-\">\n    <Breadcrumbs.Item>Home</Breadcrumbs.Item>\n    <Breadcrumbs.Item href=\"\">Catalog</Breadcrumbs.Item>\n    <Breadcrumbs.Item>Page</Breadcrumbs.Item>\n  </Breadcrumbs>\n  <Spacer h={.5} />\n  <Breadcrumbs separator=\">\">\n    <Breadcrumbs.Item>Home</Breadcrumbs.Item>\n    <Breadcrumbs.Separator>:</Breadcrumbs.Separator>\n    <Breadcrumbs.Item href=\"\">Components</Breadcrumbs.Item>\n    <Breadcrumbs.Item href=\"\">Basic</Breadcrumbs.Item>\n    <Breadcrumbs.Item>Button</Breadcrumbs.Item>\n  </Breadcrumbs>\n</>\n`}\n/>\n\n<Playground\n  title=\"Icons\"\n  desc=\"Show more information with icons.\"\n  scope={{ Breadcrumbs, Home, Inbox }}\n  code={`\n<Breadcrumbs>\n  <Breadcrumbs.Item><Home /></Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"\"><Inbox /> Inbox</Breadcrumbs.Item>\n  <Breadcrumbs.Item>Page</Breadcrumbs.Item>\n</Breadcrumbs>\n`}\n/>\n\n<Playground\n  title=\"With NextJS\"\n  desc=\"Example for use with `next.js`.\"\n  scope={{ Breadcrumbs, NextLink }}\n  code={`\n<Breadcrumbs>\n  <NextLink href=\"/\">\n    <Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>\n  </NextLink>\n  <NextLink href=\"/en-us/components\">\n    <Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>\n  </NextLink>\n  <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>\n</Breadcrumbs>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/breadcrumbs.mdx\">\n<Attributes.Title>Breadcrumbs.Props</Attributes.Title>\n\n| Attribute     | Description      | Type             | Accepted values          | Default |\n| ------------- | ---------------- | ---------------- | ------------------------ | ------- |\n| **separator** | separator string | `string`         | -                        | `/`     |\n| ...           | native props     | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Breadcrumbs.Item.Props</Attributes.Title>\n\n| Attribute    | Description        | Type                          | Accepted values          | Default |\n| ------------ | ------------------ | ----------------------------- | ------------------------ | ------- |\n| **href**     | link address       | `string`                      | -                        | -       |\n| **nextLink** | in `next.js` route | `boolean`                     | -                        | `false` |\n| **onClick**  | click event        | `(event: MouseEvent) => void` | -                        | -       |\n| ...          | native props       | `AnchorHTMLAttributes`        | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/button-dropdown.mdx",
    "content": "import { ButtonDropdown, Spacer } from 'components'\nimport { Playground, Attributes, Layout } from 'lib/components'\nimport Plus from '@geist-ui/icons/plus'\n\nexport const meta = {\n  title: 'Button Dropdown',\n  group: 'Navigation',\n  index: 101,\n}\n\n## Button Dropdown\n\nDisplay related but alternate actions for a button.\n\n<Playground\n  title=\"Basic\"\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown>\n  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"Disabled\"\n  desc=\"Disable all buttons.\"\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown disabled>\n  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"Loading\"\n  desc=\"Show friendly load indicator.\"\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown loading>\n  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  scope={{ ButtonDropdown, Spacer }}\n  code={`\n<>\n  <ButtonDropdown type=\"secondary\" scale={0.5}>\n    <ButtonDropdown.Item main>Secondary Action</ButtonDropdown.Item>\n  </ButtonDropdown>\n  <Spacer h={.5} />\n  <ButtonDropdown type=\"success\" scale={0.5}>\n    <ButtonDropdown.Item main>Success Action</ButtonDropdown.Item>\n  </ButtonDropdown>\n  <Spacer h={.5} />\n  <ButtonDropdown type=\"warning\" scale={0.5}>\n    <ButtonDropdown.Item main>Warning Action</ButtonDropdown.Item>\n  </ButtonDropdown>\n  <Spacer h={.5} />\n  <ButtonDropdown type=\"error\" scale={0.5}>\n    <ButtonDropdown.Item main>Error Action</ButtonDropdown.Item>\n  </ButtonDropdown>\n</>\n`}\n/>\n\n<Playground\n  title=\"Multiple Type\"\n  desc=\"Specify the status of a button individually.\"\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown scale={2/3} auto>\n  <ButtonDropdown.Item main>Check Account</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Block Account</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Lock Account</ButtonDropdown.Item>\n  <ButtonDropdown.Item type=\"error\">Destroy Account</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"Custom Right Icon\"\n  desc=\"The `color` and `size` of the right icon will be set automatically.\"\n  scope={{ ButtonDropdown, Plus }}\n  code={`\n<ButtonDropdown scale={2/3} auto icon={<Plus />}>\n  <ButtonDropdown.Item main>Check Account</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Block Account</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Lock Account</ButtonDropdown.Item>\n  <ButtonDropdown.Item type=\"error\">Destroy Account</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/button-dropdown.mdx\">\n<Attributes.Title>ButtonDropdown.Props</Attributes.Title>\n\n| Attribute    | Description               | Type                  | Accepted values                             | Default              |\n| ------------ | ------------------------- | --------------------- | ------------------------------------------- | -------------------- |\n| **type**     | button type               | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default`            |\n| **loading**  | display loading indicator | `boolean`             | -                                           | `false`              |\n| **auto**     | autoscale width           | `boolean`             | -                                           | `false`              |\n| **disabled** | disable button            | `boolean`             | -                                           | `false`              |\n| **icon**     | custom right icon         | `ReactNode`           | -                                           | `ButtonDropdownIcon` |\n| ...          | native props              | `HTMLAttributes`      | `'autoFocus', 'name', 'className', ...`     | -                    |\n\n<Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>\n\n| Attribute   | Description     | Type                   | Accepted values                             | Default   |\n| ----------- | --------------- | ---------------------- | ------------------------------------------- | --------- |\n| **type**    | button type     | `ButtonDropdownTypes`  | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |\n| **main**    | the main action | `boolean`              | -                                           | `false`   |\n| **onClick** | event handler   | `MouseEventHandler`    | -                                           | -         |\n| ...         | native props    | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...`            | -         |\n\n<Attributes.Title>ButtonDropdownTypes</Attributes.Title>\n\n```ts\ntype ButtonDropdownTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/button-group.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, Spacer, ButtonGroup } from 'components'\n\nexport const meta = {\n  title: 'Button Group',\n  group: 'Data Entry',\n}\n\n## Button Group\n\nA set of related buttons.\n\n<Playground\n  title=\"Basic\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<ButtonGroup>\n  <Button>One</Button>\n  <Button>Two</Button>\n  <Button>Three</Button>\n</ButtonGroup>\n`}\n/>\n\n<Playground\n  title=\"Variant\"\n  desc=\"set the type or styles of all buttons in the group.\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup type=\"success\">\n    <Button>One</Button>\n    <Button>Two</Button>\n    <Button>Three</Button>\n  </ButtonGroup>\n  <ButtonGroup type=\"abort\">\n    <Button>Action1</Button>\n    <Button>Action2</Button>\n  </ButtonGroup>\n  <ButtonGroup type=\"warning\" ghost>\n    <Button>Action1</Button>\n    <Button>Action2</Button>\n  </ButtonGroup>\n  <ButtonGroup type=\"success-light\">\n    <Button>One</Button>\n    <Button>Two</Button>\n    <Button>Three</Button>\n  </ButtonGroup>\n</>\n`}\n/>\n\n<Playground\n  title=\"Sizes\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup scale={2/3}>\n    <Button scale={2/3}>One</Button>\n    <Button scale={2/3}>Two</Button>\n    <Button scale={2/3}>Three</Button>\n  </ButtonGroup>\n  <ButtonGroup scale={1/3}>\n    <Button scale={1/3}>Action1</Button>\n    <Button scale={1/3}>Action2</Button>\n  </ButtonGroup>\n</>\n`}\n/>\n\n<Playground\n  title=\"Vertical\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup vertical>\n    <Button>One</Button>\n    <Button>Two</Button>\n    <Button>Three</Button>\n    <Button>Four</Button>\n  </ButtonGroup>\n</>\n`}\n/>\n\n<Playground\n  title=\"Disabled\"\n  desc=\"disable all buttons in the group.\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup scale={0.5} disabled>\n    <Button scale={0.5}>One</Button>\n    <Button scale={0.5}>Two</Button>\n    <Button scale={0.5}>Three</Button>\n  </ButtonGroup>\n</>\n`} />\n<Attributes edit=\"/pages/en-us/components/button-group.mdx\">\n<Attributes.Title>ButtonGroup.Props</Attributes.Title>\n\n| Attribute    | Description                 | Type                   | Accepted values             | Default   |\n| ------------ | --------------------------- | ---------------------- | --------------------------- | --------- |\n| **type**     | button type                 | `ButtonTypes`          | [ButtonTypes](#buttontypes) | `default` |\n| **ghost**    | the opposite color          | `boolean`              | -                           | `false`   |\n| **vertical** | show all buttons vertically | `boolean`              | -                           | `false`   |\n| **disabled** | disable all buttons         | `boolean`              | -                           | `false`   |\n| ...          | native props                | `ButtonHTMLAttributes` | `'id', 'className', ...`    | -         |\n\n<Attributes.Title>ButtonTypes</Attributes.Title>\n\n```ts\ntype ButtonTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'abort'\n  | 'secondary-light'\n  | 'success-light'\n  | 'warning-light'\n  | 'error-light'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/button.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, Spacer, Grid, Code } from 'components'\nimport Settings from '@geist-ui/icons/settings'\nimport UserX from '@geist-ui/icons/userX'\nimport Power from '@geist-ui/icons/power'\n\nexport const meta = {\n  title: 'Button',\n  group: 'General',\n}\n\n## Button\n\nUsed to trigger an operation.\n\n<Playground\n  title=\"Basic\"\n  desc=\"The basic `Button` contains an animation effect.\"\n  scope={{ Button }}\n  code={`\n<Button>Action</Button>\n`}\n/>\n\n<Playground\n  title=\"Loading\"\n  desc=\"Show running status.\"\n  scope={{ Button, Spacer }}\n  code={`\n<>\n  <Button loading>Action</Button>\n  <Spacer h={.5} />\n  <Button loading scale={0.75}>Action</Button>\n  <Spacer h={.5} />\n  <Button loading auto type=\"success\" scale={2/3}>Action</Button>\n</>\n`}\n/>\n\n<Playground\n  title=\"Disabled\"\n  desc=\"Do not respond to any action.\"\n  scope={{ Button }}\n  code={`\n<Button disabled>Action</Button>\n`}\n/>\n\n<Playground\n  title=\"Shadow\"\n  desc=\"The shadow highlights the level of the button.\"\n  scope={{ Button }}\n  code={`\n<Button shadow type=\"secondary\">Shadow</Button>\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  desc=\"Different state.\"\n  scope={{ Button, Spacer, Grid }}\n  code={`\n<Grid.Container gap={1.5}>\n  <Grid><Button auto type=\"secondary\">Secondary</Button></Grid>\n  <Grid><Button auto type=\"success\">Success</Button></Grid>\n  <Grid><Button auto type=\"warning\">Warning</Button></Grid>\n  <Grid><Button auto type=\"error\">Error</Button></Grid>\n  <Grid><Button auto type=\"abort\">Abort</Button></Grid>\n  <Grid><Button auto type=\"secondary-light\">Secondary Light</Button></Grid>\n  <Grid><Button auto type=\"success-light\">Success Light</Button></Grid>\n  <Grid><Button auto type=\"warning-light\">Warning Light</Button></Grid>\n  <Grid><Button auto type=\"error-light\">Error Light</Button></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"GHOST\"\n  desc=\"The opposite color.\"\n  scope={{ Button, Grid }}\n  code={`\n<Grid.Container gap={1.5}>\n  <Grid><Button type=\"secondary\" ghost auto scale={0.7}>Secondary</Button></Grid>\n  <Grid><Button type=\"success\" ghost auto scale={0.7}>Success</Button></Grid>\n  <Grid><Button type=\"warning\" ghost auto scale={0.7}>Warning</Button></Grid>\n  <Grid><Button type=\"error\" ghost auto scale={0.7}>Error</Button></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"Scale\"\n  desc=\"Buttons of different sizes.\"\n  scope={{ Button, Grid }}\n  code={`\n<Grid.Container gap={1.5}>\n  <Grid><Button auto scale={0.25}>0.25</Button></Grid>\n  <Grid><Button auto scale={0.35}>0.35</Button></Grid>\n  <Grid><Button auto scale={1/2}>1 / 2</Button></Grid>\n  <Grid><Button auto scale={0.75}>0.75</Button></Grid>\n  <Grid><Button auto padding={0}>NoPadding</Button></Grid>\n  <Grid><Button auto font={0.25}>Small Font</Button></Grid>\n  <Grid><Button auto pl={0} ml=\"25px\">Offset</Button></Grid>\n  <Grid xs={12}><Button width=\"100%\">Full Width</Button></Grid>\n  <Grid xs={12}>\n    <Button auto width=\"30%\" mx=\"5px\">proportion</Button>\n    <Button auto width=\"30%\" mx=\"5px\">proportion</Button>\n    <Button auto width=\"30%\" mx=\"5px\">proportion</Button>\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"With Icons\"\n  desc=\"The `color` and `size` of the icon will be set automatically.\"\n  scope={{ Button, Spacer, Settings, UserX, Power }}\n  code={`\n<>\n  <Button iconRight={<Power />} auto scale={2/3} />\n  <Spacer w={.5} inline />\n  <Button iconRight={<Power />} auto scale={2/3} px={0.6} />\n  <Spacer h={.5} />\n  <Button icon={<Settings />} auto>Action</Button>\n  <Spacer h={.5} />\n  <Button icon={<Settings />} type=\"success\" scale={0.85}>Success</Button>\n  <Spacer h={.5} />\n  <Button icon={<Settings />} type=\"secondary\">Success</Button>\n  <Spacer h={.5} />\n  <Button icon={<UserX />} type=\"error\" ghost>Remove User</Button>\n  <Spacer h={.5} />\n  <Button icon={<UserX />} disabled>Remove User</Button>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/button.mdx\">\n<Attributes.Title>Button.Props</Attributes.Title>\n\n| Attribute     | Description                               | Type                                            | Accepted values             | Default   |\n| ------------- | ----------------------------------------- | ----------------------------------------------- | --------------------------- | --------- |\n| **type**      | button type                               | `ButtonTypes`                                   | [ButtonTypes](#buttontypes) | `default` |\n| **ghost**     | the opposite color                        | `boolean`                                       | -                           | `false`   |\n| **loading**   | display loading indicator                 | `boolean`                                       | -                           | `false`   |\n| **shadow**    | display shadow                            | `boolean`                                       | -                           | `false`   |\n| **auto**      | autoscale width                           | `boolean`                                       | -                           | `false`   |\n| **effect**    | display animation                         | `boolean`                                       | -                           | `true`    |\n| **disabled**  | disable button                            | `boolean`                                       | -                           | `false`   |\n| **onClick**   | click handler                             | `MouseEventHandler`                             | -                           | -         |\n| **icon**      | show icon in button                       | `ReactNode`                                     | -                           | -         |\n| **iconRight** | show icon on the other side of the button | `ReactNode`                                     | -                           | -         |\n| **htmlType**  | native type of button element             | `ButtonHTMLAttributes.type`                     | -                           | `button`  |\n| **ref**       | forwardRef                                | <Code>Ref<HTMLButtonElement &#124; null></Code> | -                           | -         |\n| ...           | native props                              | `ButtonHTMLAttributes`                          | `'id', 'className', ...`    | -         |\n\n<Attributes.Title>ButtonTypes</Attributes.Title>\n\n```ts\ntype ButtonTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'abort'\n  | 'secondary-light'\n  | 'success-light'\n  | 'warning-light'\n  | 'error-light'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/capacity.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Capacity, Spacer, useTheme } from 'components'\n\nexport const meta = {\n  title: 'Capacity',\n  group: 'Data Display',\n}\n\n## Capacity\n\nDisplay an capacity indicator.\n\n<Playground\n  scope={{ Capacity, Spacer }}\n  code={`\n<>\n  <Capacity value={15} /> <Spacer />\n  <Capacity value={45} /> <Spacer />\n  <Capacity value={95} />\n</>\n`}\n/>\n\n<Playground\n  title=\"Fixed Color\"\n  desc=\"Specify a color to override the default.\"\n  scope={{ Capacity, Spacer, useTheme }}\n  code={`\n() => {\n  const theme = useTheme()\n  return <Capacity value={75} color={theme.palette.success} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/capacity.mdx\">\n<Attributes.Title>Capacity.Props</Attributes.Title>\n\n| Attribute | Description      | Type             | Accepted values    | Default |\n| --------- | ---------------- | ---------------- | ------------------ | ------- |\n| **value** | value number     | `number`         | -                  | 0       |\n| **limit** | max value        | `number`         | -                  | 100     |\n| **color** | css color string | `string`         | -                  | -       |\n| ...       | native props     | `HTMLAttributes` | `'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/card.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Card, Spacer, Link, Image, Text, Divider, Code, Grid } from 'components'\n\nexport const meta = {\n  title: 'Card',\n  group: 'Surfaces',\n}\n\n## Card\n\nA common container component.\n\n<Playground\n  title=\"Basic\"\n  scope={{ Card }}\n  code={`\n<Card>\n  <p>A basic card.</p>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"Hoverable\"\n  scope={{ Card }}\n  code={`\n<Card hoverable>\n  <p>hoverable card.</p>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"Shadow\"\n  scope={{ Card, Text }}\n  code={`\n<Card shadow>\n  <Text h4 my={0}>HTTP is extensible</Text>\n  <Text>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.</Text>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  desc=\"Show different states with colors.\"\n  scope={{ Card, Grid, Text }}\n  code={`\n() => {\n  const types = ['secondary', 'success', 'warning', 'error', 'dark', 'alert', 'purple', 'violet', 'cyan']\n  return (\n    <Grid.Container gap={1.5}>\n      {types.map(type => (\n        <Grid xs={8} key={type}>\n          <Card type={type} width=\"100%\">\n            <Text h4 my={0} style={{ textTransform: 'uppercase' }}>{type}</Text>\n            <Text>{type}</Text>\n          </Card>\n        </Grid>\n      ))}\n    </Grid.Container>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"With Footer\"\n  scope={{ Card, Link, Grid, Text }}\n  code={`\n<Grid.Container gap={1.5}>\n  <Grid xs={12} justify=\"center\">\n    <Card width=\"100%\">\n      <Text h4 my={0}>Geist UI React</Text>\n      <Text>Modern and minimalist React UI library.</Text>\n      <Card.Footer>\n        <Link color target=\"_blank\" href=\"https://github.com/geist-org/geist-ui\">Visit source code on GitHub.</Link>\n      </Card.Footer>\n    </Card>\n  </Grid>\n  <Grid xs={12} justify=\"center\">\n    <Card width=\"100%\" type=\"dark\">\n      <Text h4 my={0}>Geist UI React</Text>\n      <Text>Modern and minimalist React UI library.</Text>\n      <Card.Footer>\n        <Link target=\"_blank\" href=\"https://github.com/geist-org/geist-ui\">Visit source code on GitHub.</Link>\n      </Card.Footer>\n    </Card>\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"With Image\"\n  scope={{ Card, Link, Spacer, Text, Image }}\n  code={`\n<Card width=\"400px\">\n  <Image src=\"https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png\"\n   height=\"200px\" width=\"400px\" draggable={false} />\n  <Text h4 mb={0}>Geist UI React</Text>\n  <Text type=\"secondary\" small>Modern and minimalist React UI library.</Text>\n  <Card.Footer>\n    <Link block target=\"_blank\" href=\"https://github.com/geist-org/geist-ui\">Visit source code on GitHub.</Link>\n  </Card.Footer>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"With Divider\"\n  desc=\"Show different types of content using `Divider`\"\n  scope={{ Card, Text, Divider, Code }}\n  code={`\n<Card width=\"400px\">\n  <Card.Content>\n    <Text b my={0}>Description</Text>\n  </Card.Content>\n  <Divider h=\"1px\" my={0} />\n  <Card.Content>\n    <Text>The Object constructor creates an object wrapper for the given value.</Text>\n    <Text>When called in a non-constructor context, Object behaves identically to <Code>new Object()</Code>.</Text>\n  </Card.Content>\n</Card>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/card.mdx\">\n<Attributes.Title>Card.Props</Attributes.Title>\n\n| Attribute     | Description         | Type                  | Accepted values         | Default   |\n| ------------- | ------------------- | --------------------- | ----------------------- | --------- |\n| **hoverable** | add effect on hover | `boolean`             | -                       | `false`   |\n| **shadow**    | show shadow         | `boolean`             | -                       | `false`   |\n| **type**      | card type           | [CardType](#cardtype) | -                       | `default` |\n| ...           | native props        | `HTMLAttributes`      | `'id', className', ...` | -         |\n\n<Attributes.Title alias=\"Card.Body\">Card.Content.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values         | Default |\n| --------- | ------------ | ---------------- | ----------------------- | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', className', ...` | -       |\n\n<Attributes.Title alias=\"Card.Actions\">Card.Footer.Props</Attributes.Title>\n\n| Attribute             | Description                   | Type             | Accepted values         | Default |\n| --------------------- | ----------------------------- | ---------------- | ----------------------- | ------- |\n| **disableAutoMargin** | cancel automatic margin value | `boolean`        | -                       | `false` |\n| ...                   | native props                  | `HTMLAttributes` | `'id', className', ...` | -       |\n\n<Attributes.Title>CardType</Attributes.Title>\n\n```ts\ntype CardType =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n  | 'alert'\n  | 'purple'\n  | 'violet'\n  | 'cyan'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/checkbox.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Checkbox, Spacer } from 'components'\n\nexport const meta = {\n  title: 'Checkbox',\n  group: 'Data Entry',\n}\n\n## Checkbox\n\nDisplays a boolean value.\n\n<Playground\n  desc=\"Change state with `checked` props.\"\n  scope={{ Checkbox }}\n  code={`\n<Checkbox checked={true}>Sydney</Checkbox>\n`}\n/>\n\n<Playground\n  title=\"sizes\"\n  desc=\"Checkbox of different sizes.\"\n  scope={{ Checkbox }}\n  code={`\n<>\n  <Checkbox mr=\"15px\" checked={true} scale={0.25}>scale-0.25</Checkbox>\n  <Checkbox mr=\"15px\" checked={true} scale={0.5}>scale-0.5</Checkbox>\n  <Checkbox mr=\"15px\" checked={true} scale={0.75}>scale-0.75</Checkbox>\n</>\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Differentiate states by color.\"\n  scope={{ Checkbox, Spacer }}\n  code={`\n<>\n  <Checkbox checked={true} type=\"default\">Default</Checkbox>\n  <Spacer h={.5} />\n  <Checkbox checked={true} type=\"success\">Success</Checkbox>\n  <Spacer h={.5} />\n  <Checkbox checked={true} type=\"warning\">Warning</Checkbox>\n  <Spacer h={.5} />\n  <Checkbox checked={true} type=\"error\">Error</Checkbox>\n</>\n`}\n/>\n\n<Playground\n  title=\"disable\"\n  scope={{ Checkbox, Spacer }}\n  code={`\n<>\n  <Checkbox>Sydney</Checkbox>\n  <Spacer h={.5} />\n  <Checkbox disabled checked={true}>Bei Jing</Checkbox>\n</>\n`}\n/>\n\n<Playground\n  title=\"group\"\n  desc=\"Manage a set of `Checkbox`.\"\n  scope={{ Checkbox, Spacer }}\n  code={`\n() => {\n  const handler = value => {\n    console.log(value)\n  }\n  return (\n    <Checkbox.Group value={['sydney']} onChange={handler}>\n      <Checkbox value=\"sydney\">Sydney</Checkbox>\n      <Checkbox value=\"beijing\">Bei Jing</Checkbox>\n      <Checkbox value=\"london\">London</Checkbox>\n      <Checkbox value=\"tokyo\">Tokyo</Checkbox>\n    </Checkbox.Group>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/checkbox.mdx\">\n<Attributes.Title>Checkbox.Props</Attributes.Title>\n\n| Attribute          | Description                                 | Type                                           | Accepted values                 | Default   |\n| ------------------ | ------------------------------------------- | ---------------------------------------------- | ------------------------------- | --------- |\n| **checked**        | checked or not                              | `boolean`                                      | -                               | -         |\n| **initialChecked** | checked or not on initial                   | `boolean`                                      | -                               | `false`   |\n| **onChange**       | change event handler                        | `CheckboxEvent`                                | -                               | -         |\n| **value**          | unique identification value (only in group) | `string`                                       | -                               | -         |\n| **disabled**       | disable checkbox                            | `boolean`                                      | -                               | `false`   |\n| **type**           | current type                                | `CheckboxTypes`                                | [CheckboxTypes](#checkboxtypes) | `default` |\n| **ref**            | forwardRef                                  | <Code>Ref<HTMLInputElement &#124; null></Code> | -                               | -         |\n| ...                | native props                                | `LabelHTMLAttributes`                          | `'form' ...`                    | -         |\n\n<Attributes.Title>Checkbox.Group.Props</Attributes.Title>\n\n| Attribute    | Description            | Type                         | Accepted values | Default |\n| ------------ | ---------------------- | ---------------------------- | --------------- | ------- |\n| **value**    | checked children       | `Array<string>`              | -               | `[]`    |\n| **disabled** | disable checkbox group | `boolean`                    | -               | `false` |\n| **onChange** | change event handler   | `(values: string[]) => void` | -               | -       |\n| ...          | native props           | `HTMLAttributes`             | `'id', ...`     | -       |\n\n<Attributes.Title>CheckboxTypes</Attributes.Title>\n\n```ts\ntype CheckboxTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>CheckboxEvent</Attributes.Title>\n\n```ts\ninterface CheckboxEventTarget {\n  checked: boolean\n}\n\nexport interface CheckboxEvent {\n  target: CheckboxEventTarget\n  stopPropagation: () => void\n  preventDefault: () => void\n  nativeEvent: React.ChangeEvent\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/code.mdx",
    "content": "import { Code, Text } from 'components'\nimport { Layout, Playground, Attributes, ParsedCodes } from 'lib/components'\n\nexport const meta = {\n  title: 'Code',\n  group: 'General',\n}\n\n## Code\n\nShow source code in a standardized way. Want to display shell code snippets? try [Snippet](/en-us/components/snippet).\n\n<Playground\n  desc=\"Basic inline codes.\"\n  scope={{ Code, Text }}\n  code={`\n<Text my={0}>Run <Code>npm i @geist-ui/core</Code> to install.</Text>\n`}\n/>\n\n<Playground\n  title=\"Code Block\"\n  desc=\"Multi line code display.\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Types }}\n  code={`\n<Code block my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Playground\n  title=\"width\"\n  desc=\"Specify width manually, or other styles.\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Greeting }}\n  code={`\n<Code block width=\"50%\" my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Playground\n  title=\"name\"\n  desc=\"Specify the file name for the code block.\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}\n  code={`\n<Code block name=\"/Components/Clock.jsx\" my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Playground\n  title=\"classic style\"\n  desc=\"The classic design style with a line border instead of a background.\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}\n  code={`\n<Code block classic name=\"/Components/Clock.jsx\" my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/code.mdx\">\n<Attributes.Title>Code.Props</Attributes.Title>\n\n| Attribute   | Description                                 | Type             | Accepted values    | Default |\n| ----------- | ------------------------------------------- | ---------------- | ------------------ | ------- |\n| **block**   | show code in `pre`                          | `boolean`        | -                  | `false` |\n| **name**    | text displayed at the top of the code block | `string`         | -                  | -       |\n| **classic** | display with classic style                  | `boolean`        | -                  | `false` |\n| ...         | native props                                | `HTMLAttributes` | `'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/collapse.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Collapse, Spacer, Text } from 'components'\n\nexport const meta = {\n  title: 'Collapse',\n  group: 'Surfaces',\n}\n\n## Collapse\n\nDisplay large amounts of text in collapsible sections. Commonly referred to as an accordion.\n\n<Playground\n  scope={{ Collapse, Text }}\n  desc=\"Show title only by default.\"\n  code={`\n<Collapse.Group>\n  <Collapse title=\"Question A\">\n    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>\n  </Collapse>\n  <Collapse title=\"Question B\">\n    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>\n  </Collapse>\n</Collapse.Group>\n`}\n/>\n\n<Playground\n  title=\"Expanded\"\n  desc=\"Specify what to display first.\"\n  scope={{ Collapse, Text }}\n  code={`\n<Collapse.Group>\n  <Collapse title=\"Question A\" initialVisible>\n    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>\n  </Collapse>\n  <Collapse title=\"Question B\">\n    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>\n  </Collapse>\n</Collapse.Group>\n`}\n/>\n\n<Playground\n  title=\"Subtitle\"\n  desc=\"Add text or components as subtitle.\"\n  scope={{ Collapse, Text }}\n  code={`\n<Collapse.Group>\n  <Collapse title=\"Question A\" subtitle=\"More description about Question A\">\n    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>\n  </Collapse>\n  <Collapse title=\"Question B\" subtitle={<>More description about <Text b>Question A</Text></>}>\n    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>\n  </Collapse>\n</Collapse.Group>\n`}\n/>\n\n<Playground\n  title=\"Shadow\"\n  desc=\"Highlight importance at a higher level.\"\n  scope={{ Collapse, Text }}\n  code={`\n<Collapse shadow title=\"Question A\" subtitle=\"More description about Question A\">\n  <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>\n</Collapse>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/collapse.mdx\">\n<Attributes.Title>Collapse.Props</Attributes.Title>\n\n| Attribute           | Description      | Type             | Accepted values                  | Default |\n| ------------------- | ---------------- | ---------------- | -------------------------------- | ------- |\n| **title**(required) | collapse title   | `string`         | -                                | -       |\n| **subtitle**        | description      | `string`         | -                                | -       |\n| **initialVisible**  | initial expanded | `boolean`        | -                                | `false` |\n| **shadow**          | show shadow card | `boolean`        | -                                | `false` |\n| ...                 | native props     | `HTMLAttributes` | `'id', 'name', 'className', ...` | -       |\n\n<Attributes.Title>Collapse.Group.Props</Attributes.Title>\n\n| Attribute     | Description    | Type             | Accepted values                  | Default |\n| ------------- | -------------- | ---------------- | -------------------------------- | ------- |\n| **accordion** | accordion mode | `boolean`        | -                                | `true`  |\n| ...           | native props   | `HTMLAttributes` | `'id', 'name', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/description.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Description, Code } from 'components'\n\nexport const meta = {\n  title: 'Description',\n  group: 'Data Display',\n}\n\n## Description\n\nDisplay brief information with a title and description.\n\n<Playground\n  desc=\"`Description` component contains title and content.\"\n  scope={{ Description }}\n  code={`\n<Description title=\"Section Title\" content=\"Data about this section.\" />\n`}\n/>\n\n<Playground\n  title=\"With Component\"\n  desc=\"Use in combination with other components.\"\n  scope={{ Description, Code }}\n  code={`\n<Description title=\"Section Title\" content={<p><Code>code</Code> about this section.</p>} />\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/description.mdx\">\n<Attributes.Title>Description.Props</Attributes.Title>\n\n| Attribute   | Description  | Type                   | Accepted values | Default |\n| ----------- | ------------ | ---------------------- | --------------- | ------- |\n| **title**   | title text   | `ReactNode` / `string` | -               | -       |\n| **content** | title text   | `ReactNode` / `string` | -               | -       |\n| ...         | native props | `HTMLAttributes`       | -               | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/display.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Display, Code, Snippet, Image } from 'components'\n\nexport const meta = {\n  title: 'Display',\n  group: 'Data Display',\n}\n\n## Display\n\nTo display important information or images in a central alignment.\n\n<Playground\n  title=\"Basic\"\n  desc=\"Describe the main part with a paragraph.\"\n  scope={{ Display, Image }}\n  code={`\n  <Display shadow caption=\"An open-source design system for building modern websites and applications.\">\n    <Image width=\"435px\" height=\"200px\" src=\"/images/geist-banner.png\" />\n  </Display>\n`}\n/>\n\n<Playground\n  title=\"With Code\"\n  desc=\"Show multiline code blocks.\"\n  scope={{ Display, Code }}\n  code={`\n() => {\n  const codes = \\`{\n  \"build\": {\n    \"env\": {\n      \"VARIABLE_NAME\": \"@secret-name\"\n    }\n  }\n}\\`\n  return (\n    <Display width=\"500px\" caption=\"Application's build with a defined environment variable.\">\n      <Code block>{codes}</Code>\n    </Display>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"With Snippet\"\n  desc=\"Show shell codes.\"\n  scope={{ Display, Snippet }}\n  code={`\n<Display width=\"500px\" caption=\"Run this command to install the library.\">\n  <Snippet type=\"dark\">yarn add @geist-ui/core</Snippet>\n</Display>\n`}\n/>\n\n<Playground\n  title=\"Component Caption\"\n  desc=\"Use component on `caption` prop.\"\n  scope={{ Display, Code, Image }}\n  code={`\n  <Display shadow caption={<p>Browse <Code>geist-ui.dev</Code> for more documentation.</p>}>\n    <Image width=\"650px\" height=\"297px\" src=\"/images/geist-banner.png\" />\n  </Display>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/display.mdx\">\n<Attributes.Title>Display.Props</Attributes.Title>\n\n| Attribute   | Description                   | Type                   | Accepted values | Default |\n| ----------- | ----------------------------- | ---------------------- | --------------- | ------- |\n| **caption** | description for display block | `ReactNode` / `string` | -               | -       |\n| **shadow**  | show shadow                   | `boolean`              | -               | `false` |\n| ...         | native props                  | `HTMLAttributes`       | -               | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/divider.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Divider, Text } from 'components'\n\nexport const meta = {\n  title: 'Divider',\n  group: 'Others',\n}\n\n## Divider\n\nA divider line separates different content.\n\n<Playground\n  desc=\"Basic usage.\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    In server-driven content negotiation, or proactive content negotiation,\n    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.\n    These headers describe the preferred choice of the user.\n  </Text>\n  <Divider />\n  <Text>\n    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.\n    The algorithm is server-specific and not defined in the standard.\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"With Text\"\n  desc=\"Display text or components in divider.\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    In server-driven content negotiation, or proactive content negotiation,\n    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.\n    These headers describe the preferred choice of the user.\n  </Text>\n  <Divider>HTTP</Divider>\n  <Text>\n    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.\n    The algorithm is server-specific and not defined in the standard.\n  </Text>\n  <Divider align=\"start\">standard headers</Divider>\n  <Text>\n    The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation\n    (Accept, Accept-Charset, Accept-Encoding, Accept-Language)\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"Space\"\n  desc=\"Custom size of white space around components.\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    In server-driven content negotiation, or proactive content negotiation,\n    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.\n    These headers describe the preferred choice of the user.\n  </Text>\n  <Divider h={5}>HTTP</Divider>\n  <Text>\n    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.\n    The algorithm is server-specific and not defined in the standard.\n  </Text>\n  <Divider my={5} h={5}>standard headers</Divider>\n  <Text>\n    The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation\n    (Accept, Accept-Charset, Accept-Encoding, Accept-Language)\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  desc=\"Different state.\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    In server-driven content negotiation, or proactive content negotiation,\n    the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.\n    These headers describe the preferred choice of the user.\n  </Text>\n  <Divider h={3} type=\"success\">HTTP</Divider>\n  <Text>\n    The server uses them as hints and an internal algorithm chooses the best content to serve to the client.\n    The algorithm is server-specific and not defined in the standard.\n  </Text>\n  <Divider h={3} my={3} type=\"warning\">standard headers</Divider>\n  <Text>\n    The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation\n    (Accept, Accept-Charset, Accept-Encoding, Accept-Language)\n  </Text>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/divider.mdx\">\n<Attributes.Title>Divider.Props</Attributes.Title>\n\n| Attribute | Description       | Type                          | Accepted values                  | Default   |\n| --------- | ----------------- | ----------------------------- | -------------------------------- | --------- |\n| **type**  | type of divider    | [DividerTypes](#dividertypes) | -                                | `default` |\n| **align** | alignment of text | [DividerAlign](#divideralign) | -                                | `center`  |\n| ...       | native props      | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -         |\n\n<Attributes.Title>DividerTypes</Attributes.Title>\n\n```ts\ntype DividerTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n<Attributes.Title>DividerAlign</Attributes.Title>\n\n```ts\ntype DividerAlign = 'center' | 'start' | 'left' | 'end' | 'right'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/dot.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Dot } from 'components'\n\nexport const meta = {\n  title: 'Dot',\n  group: 'Data Display',\n}\n\n## Dot\n\nDisplay an indicator of standardization status.\n\n<Playground\n  scope={{ Dot }}\n  code={`\n<>\n  <Dot style={{ marginRight: '15px' }} />\n  <Dot style={{ marginRight: '15px' }} type=\"success\" />\n  <Dot style={{ marginRight: '15px' }} type=\"warning\" />\n  <Dot type=\"error\" />\n</>\n`}\n/>\n\n<Playground\n  scope={{ Dot }}\n  code={`\n<>\n  <Dot style={{ marginRight: '20px' }}>Canceled</Dot>\n  <Dot style={{ marginRight: '20px' }} type=\"success\">Ready</Dot>\n  <Dot style={{ marginRight: '20px' }} type=\"warning\">Warning</Dot>\n  <Dot type=\"error\">Error</Dot>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/dot.mdx\">\n<Attributes.Title>Dot.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values       | Default   |\n| --------- | ------------ | ---------------- | --------------------- | --------- |\n| **type**  | dot type     | `DotTypes`       | [DotTypes](#dottypes) | `default` |\n| ...       | native props | `HTMLAttributes` | -                     | -         |\n\n<Attributes.Title>DotTypes</Attributes.Title>\n\n```ts\ntype DotTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/drawer.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Drawer, Button } from 'components'\n\nexport const meta = {\n  title: 'Drawer',\n  group: 'Feedback',\n}\n\n## Drawer\n\nAn interactive element fixed to the edge of the screen.\n\n<Playground\n  desc=\"Basic usage.\"\n  scope={{ Drawer, Button }}\n  code={`\n() => {\n  const [state, setState] = React.useState(false)\n  return (\n    <div>\n      <Button auto onClick={() => setState(true)} scale={1/2}>Show Drawer</Button>\n      <Drawer visible={state} onClose={() => setState(false)} placement=\"right\">\n        <Drawer.Title>Drawer</Drawer.Title>\n        <Drawer.Subtitle>This is a drawer</Drawer.Subtitle>\n        <Drawer.Content>\n          <p>Some content contained within the drawer.</p>\n        </Drawer.Content>\n      </Drawer>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Placement\"\n  scope={{ Drawer, Button }}\n  code={`\n() => {\n  const [state, setState] = React.useState(false)\n  const [placement, setPlacement] = React.useState('')\n  const open = (text) => {\n    setPlacement(text)\n    setState(true)\n  }\n  return (\n    <div>\n      <Button auto onClick={() => open('top')} scale={1/2} mr=\"10px\">Top</Button>\n      <Button auto onClick={() => open('right')} scale={1/2} mr=\"10px\">Right</Button>\n      <Button auto onClick={() => open('bottom')} scale={1/2} mr=\"10px\">Bottom</Button>\n      <Button auto onClick={() => open('left')} scale={1/2}>Left</Button>\n      <Drawer visible={state} onClose={() => setState(false)} placement={placement}>\n        <Drawer.Title>Drawer</Drawer.Title>\n        <Drawer.Subtitle>This is a drawer</Drawer.Subtitle>\n        <Drawer.Content>\n          <p>Some content contained within the drawer.</p>\n        </Drawer.Content>\n      </Drawer>\n    </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/drawer.mdx\">\n<Attributes.Title>Drawer.Props</Attributes.Title>\n\n| Attribute                | Description                      | Type                                | Accepted values            | Default |\n| ------------------------ | -------------------------------- | ----------------------------------- | -------------------------- | ------- |\n| **visible**              | open or close                    | `boolean`                           | -                          | `false` |\n| **onClose**              | close event                      | `() => void`                        | -                          | -       |\n| **onContentClick**       | event from modal content         | `(e: MouseEvent) => void`           | -                          | -       |\n| **wrapClassName**        | className of the drawer dialog   | `string`                            | -                          | -       |\n| **keyboard**             | press Esc to close drawer        | `boolean`                           | -                          | `true`  |\n| **disableBackdropClick** | click background and don't close | `boolean`                           | -                          | `false` |\n| **placement**            | position of the drawer           | [DrawerPlacement](#drawerplacement) | -                          | `right` |\n| ...                      | native props                     | `HTMLAttributes`                    | `'name', 'className', ...` | -       |\n\n<Attributes.Title>Drawer.Title.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Drawer.Subtitle.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Drawer.Content.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>DrawerPlacement</Attributes.Title>\n\n```ts\ntype DrawerPlacement = 'top' | 'bottom' | 'right' | 'left'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/fieldset.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Card, Fieldset, Button, Text, Divider } from 'components'\n\nexport const meta = {\n  title: 'Fieldset',\n  group: 'Surfaces',\n}\n\n## Fieldset\n\nDisplay a collection of related information in a single unit.\n\n<Playground\n  title=\"Basic\"\n  desc=\"Add custom buttons.\"\n  scope={{ Fieldset, Button }}\n  code={`\n<Fieldset>\n  <Fieldset.Title>HTTP is simple</Fieldset.Title>\n  <Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames. HTTP messages can be read and understood by humans, providing easier testing for developers, and reduced complexity for newcomers.</Fieldset.Subtitle>\n  <Fieldset.Footer>\n      HTTP Knowledge Base\n      <Button auto scale={1/3} font=\"12px\">OK</Button>\n    </Fieldset.Footer>\n  </Fieldset>\n`}\n/>\n\n<Playground\n  title=\"Custom Text\"\n  desc=\"Representation in different situations.\"\n  scope={{ Fieldset, Button, Text }}\n  code={`\n<Fieldset>\n  <Fieldset.Title>HTTP is extensible</Fieldset.Title>\n  <Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. </Fieldset.Subtitle>\n  <Fieldset.Footer>\n      <Text type=\"error\">An error has occurred.</Text>\n      <Button auto scale={1/3} type=\"error\" font=\"12px\">Revert</Button>\n  </Fieldset.Footer>\n</Fieldset>\n`}\n/>\n\n<Playground\n  title=\"Tabs\"\n  desc=\"Show multiple Fieldset.\"\n  scope={{ Fieldset, Button }}\n  code={`\n() => {\n  const handler = v => console.log(v)\n  return (\n    <Fieldset.Group value=\"extensible\" onChange={handler}>\n    <Fieldset label=\"simple\">\n      <Fieldset.Title>HTTP is simple</Fieldset.Title>\n      <Fieldset.Subtitle>HTTP is generally designed to be simple and human readable, even with the added complexity introduced in HTTP/2 by encapsulating HTTP messages into frames.</Fieldset.Subtitle>\n      <Fieldset.Footer>\n        HTTP Knowledge Base\n        <Button auto scale={1/3} font=\"12px\">Actions</Button>\n      </Fieldset.Footer>\n    </Fieldset>\n    <Fieldset label=\"extensible\">\n      <Fieldset.Title>HTTP is extensible</Fieldset.Title>\n      <Fieldset.Subtitle>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Fieldset.Subtitle>\n      <Fieldset.Footer>\n      HTTP Knowledge Base\n        <Button auto scale={1/3} font=\"12px\">Actions</Button>\n      </Fieldset.Footer>\n    </Fieldset>\n    <Fieldset label=\"stateless\">\n      <Fieldset.Title>HTTP is stateless</Fieldset.Title>\n      <Fieldset.Subtitle>HTTP is stateless: there is no link between two requests being successively carried out on the same connection. </Fieldset.Subtitle>\n      <Fieldset.Footer>\n        HTTP Knowledge Base\n        <Button auto scale={1/3} font=\"12px\">Actions</Button>\n      </Fieldset.Footer>\n    </Fieldset>\n    </Fieldset.Group>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"With Divider\"\n  desc=\"Use `Divider` and `Fieldset.Content` to combine different layouts.\"\n  scope={{ Fieldset, Divider }}\n  code={`\n<Fieldset>\n  <Fieldset.Content style={{ paddingTop: '10pt', paddingBottom: '10pt' }}>\n    <h4>Prerequisites</h4>\n  </Fieldset.Content>\n  <Divider my={0} />\n  <Fieldset.Content>\n    <Fieldset.Title>Basic knowledge of HTML and CSS would also be useful.</Fieldset.Title>\n    <p>To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series.\n    Those modules typically involve simple API usage, as it is often difficult to write client-side JavaScript examples without them. </p>\n  </Fieldset.Content>\n  <Fieldset.Footer>\n    <small>Client-side web APIs</small>\n  </Fieldset.Footer>\n</Fieldset>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/fieldset.mdx\">\n<Attributes.Title>Fieldset.Props</Attributes.Title>\n\n| Attribute    | Description                        | Type                     | Accepted values            | Default |\n| ------------ | ---------------------------------- | ------------------------ | -------------------------- | ------- |\n| **value**    | unique ident value (only in group) | `string`                 | -                          | -       |\n| **label**    | group tab text (only in group)     | `string`                 | -                          | -       |\n| **title**    | title of fieldset                  | `ReactNode` / `string`   | -                          | -       |\n| **subtitle** | subtitle of fieldset               | `ReactNode` / `string`   | -                          | -       |\n| ...          | native props                       | `FieldsetHTMLAttributes` | `'name', 'className', ...` | -       |\n\n<Attributes.Title alias=\"Fieldset.Body\">Fieldset.Content.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values | Default |\n| --------- | ------------ | ---------------- | --------------- | ------- |\n| ...       | native props | `HTMLAttributes` | -               | -       |\n\n<Attributes.Title>Fieldset.Footer.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values | Default |\n| --------- | ------------ | ---------------- | --------------- | ------- |\n| ...       | native props | `HTMLAttributes` | -               | -       |\n\n<Attributes.Title>Fieldset.Group.Props</Attributes.Title>\n\n| Attribute    | Description        | Type                      | Accepted values | Default |\n| ------------ | ------------------ | ------------------------- | --------------- | ------- |\n| **value**    | selected tab value | `string`                  | -               | -       |\n| **onChange** | change tab event   | `(value: string) => void` | -               | -       |\n| ...          | native props       | `HTMLAttributes`          | -               | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/file-tree.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tree, useToasts } from 'components'\n\nexport const meta = {\n  title: 'File Tree',\n  group: 'Data Display',\n}\n\n## File Tree\n\nDisplay a list of files and folders in a hierarchical tree structure.\n\n<Playground\n  title=\"Basic\"\n  desc=\"All folders and files are sorted automatically.\"\n  scope={{ Tree }}\n  code={`\n<Tree>\n  <Tree.File name=\"package.json\" />\n  <Tree.Folder name=\"components\">\n    <Tree.File name=\"layout.js\" />\n    <Tree.Folder name=\"footer\">\n      <Tree.File name=\"footer.js\" />\n      <Tree.File name=\"footer-text.js\" />\n      <Tree.File name=\"footer-license.js\" />\n    </Tree.Folder>\n    <Tree.File name=\"header.js\" />\n  </Tree.Folder>\n  <Tree.File name=\"readme.md\" />\n</Tree>\n`}\n/>\n\n<Playground\n  title=\"Imperative\"\n  desc=\"Use props `value` to show more complex file tree.\"\n  scope={{ Tree }}\n  code={`\n() => {\n  const files = [{\n    type: 'directory',\n    name: 'bin',\n    files: [{\n      type: 'file',\n      name: 'cs.js',\n    }],\n  }, {\n    type: 'directory',\n    name: 'docs',\n    files: [{\n      type: 'file',\n      name: 'controllers.md',\n    }, {\n      type: 'file',\n      name: 'es6.md',\n    }, {\n      type: 'file',\n      name: 'production.md',\n    }, {\n      type: 'file',\n      name: 'views.md',\n    }],\n  }]\n  return <Tree value={files} />\n}\n`}\n/>\n\n<Playground\n  title=\"Extra Message\"\n  desc=\"Use props `value` to show more complex file tree.\"\n  scope={{ Tree }}\n  code={`\n() => {\n  const files = [{\n    type: 'directory',\n    name: 'controllers',\n    extra: '1 file',\n    files: [{\n      type: 'file',\n      name: 'cs.js',\n      extra: '1kb',\n    }],\n  }, {\n    type: 'directory',\n    name: 'docs',\n    extra: '2 files',\n    files: [{\n      type: 'file',\n      name: 'controllers.md',\n      extra: '2.5kb',\n    }, {\n      type: 'file',\n      name: 'es6.md',\n      extra: '2.9kb',\n    }],\n  }, {\n     type: 'file',\n     name: 'production.md',\n     extra: '0.8kb',\n   }, {\n     type: 'file',\n     name: 'views.md',\n     extra: '8.1kb',\n   }]\n  return <Tree value={files} />\n}\n`}\n/>\n\n<Playground\n  title=\"Event\"\n  desc=\"Path will be reported when file is clicked.\"\n  scope={{ Tree, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const handler = path => setToast({ text: path })\n  return (\n    <Tree onClick={handler}>\n      <Tree.Folder name=\"components\">\n        <Tree.File name=\"layout.js\" />\n        <Tree.File name=\"layout.js\" />\n        <Tree.Folder name=\"footer\">\n          <Tree.File name=\"footer.js\" />\n          <Tree.File name=\"footer-text.js\" />\n          <Tree.File name=\"footer-license.js\" />\n        </Tree.Folder>\n      </Tree.Folder>\n      <Tree.File name=\"package.json\" />\n      <Tree.File name=\"readme.md\" />\n    </Tree>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/file-tree.mdx\">\n<Attributes.Title>Tree.Props</Attributes.Title>\n\n| Attribute         | Description       | Type                     | Accepted values                   | Default |\n| ----------------- | ----------------- | ------------------------ | --------------------------------- | ------- |\n| **value**         | value of files    | `Array<FileTreeValue>`   | -                                 | -       |\n| **initialExpand** | expand by default | `boolean`                | -                                 | `false` |\n| **onClick**       | click file event  | `(path: string) => void` | -                                 | -       |\n| ...               | native props      | `HTMLAttributes`         | `'id', 'title', 'className', ...` | -       |\n\n<Attributes.Title>Tree.File.Props</Attributes.Title>\n\n| Attribute          | Description   | Type             | Accepted values                   | Default |\n| ------------------ | ------------- | ---------------- | --------------------------------- | ------- |\n| **name**(required) | file name     | `string`         | -                                 | -       |\n| **extra**          | extra message | `string`         | -                                 | -       |\n| ...                | native props  | `HTMLAttributes` | `'id', 'title', 'className', ...` | -       |\n\n<Attributes.Title>Tree.Folder.Props</Attributes.Title>\n\n| Attribute          | Description   | Type             | Accepted values                   | Default |\n| ------------------ | ------------- | ---------------- | --------------------------------- | ------- |\n| **name**(required) | folder name   | `string`         | -                                 | -       |\n| **extra**          | extra message | `string`         | -                                 | -       |\n| ...                | native props  | `HTMLAttributes` | `'id', 'title', 'className', ...` | -       |\n\n<Attributes.Title>type FileTreeValue</Attributes.Title>\n\n```ts\ntype FileTreeValue = {\n  type: 'directory' || 'file'\n  name: string\n  extra?: string\n  files?: Array<FileTreeValue>\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/grid.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Grid, Card } from 'components'\nimport PlaygroundTitle from 'lib/components/playground/title'\n\nexport const meta = {\n  title: 'Grid',\n  group: 'Layout',\n}\n\n## Grid\n\nPowerful fluid style layout container.\n\nThe `Grid` component uses **dynamic CSS media query** to implement responsive layout, It has ultra-high performance\nand very small size. Of course, it still supports dynamic props and custom breakpoints.\n\n<Playground\n  desc=\"Dynamically scale container width while maintaining spacing.\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\" height=\"100px\">\n  <Grid xs={6}><Card shadow width=\"100%\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"Fluid layout\"\n  desc=\"Containers for wrapping and scaling.\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={24}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"Responsive layout\"\n  desc=\"Use different layouts for different screen widths.\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={24} md={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"Hide elements\"\n  desc=\"Hide elements when unit size is 0.\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={12} sm={0}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} sm={0}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={24}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={24}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"Auto width\"\n  desc=\"Auto fill remaining width.\"\n  scope={{ Grid, Card }}\n  code={`\n<>\n  <Grid.Container gap={2} justify=\"center\">\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  </Grid.Container>\n  <Grid.Container gap={2} justify=\"center\">\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  </Grid.Container>\n</>\n`}\n/>\n\n<PlaygroundTitle\n  title=\"custom breakpoints\"\n  desc=\"Override the default breakpoints of the `@geist-ui/core`.\"\n/>\n\n```tsx\nconst breakpoints: GeistUIThemesBreakpoints = {\n  xs: { min: '0', max: '650px' },\n  sm: { min: '650px', max: '900px' },\n  md: { min: '900px', max: '1280px' },\n  lg: { min: '1280px', max: '1920px' },\n  xl: { min: '1920px', max: '10000px' },\n}\n\nconst App = () => {\n  const myTheme = Themes.createFromLight({\n    type: 'myTheme',\n    breakpoints,\n  })\n  return (\n    <GeistProvider themes={[myTheme]} themeType=\"myTheme\">\n      <CssBaseline />\n      <AppComponent />\n    </GeistProvider>\n  )\n}\n```\n\n<Attributes edit=\"/pages/en-us/components/grid.mdx\">\n<Attributes.Title>Grid.Props</Attributes.Title>\n\n| Attribute        | Description                                           | Type             | Accepted values               | Default      |\n| ---------------- | ----------------------------------------------------- | ---------------- | ----------------------------- | ------------ |\n| **justify**      | CSS \"justify-content\" property                        | `Justify`        | [Justify](#justify)           | `flex-start` |\n| **alignItems**   | CSS \"align-items\" property                            | `AlignItems`     | [AlignItems](#alignitems)     | `stretch`    |\n| **alignContent** | CSS \"align-content\" property                          | `AlignContent`   | [AlignContent](#aligncontent) | `flex-start` |\n| **direction**    | CSS \"flex-direction\" property                         | `Direction`      | [Direction](#direction)       | `row`        |\n| **xs**           | width of grid, for `xs` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **sm**           | width of grid, for `sm` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **md**           | width of grid, for `md` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **lg**           | width of grid, for `lg` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **xl**           | width of grid, for `xl` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |\n| ...              | native props                                          | `HTMLAttributes` | `'id', 'className', ...`      | -            |\n\n<Attributes.Title>Grid.Container.Props</Attributes.Title>\n\n| Attribute | Description              | Type               | Accepted values           | Default |\n| --------- | ------------------------ | ------------------ | ------------------------- | ------- |\n| **gap**   | spacing of children      | `number` / `float` | -                         | 0       |\n| **wrap**  | CSS \"flex-wrap\" property | `Wrap`             | [Wrap](#wrap)             | `wrap`  |\n| ...       | Grid props               | `Grid.Props`       | [Grid.Props](#grid.props) | -       |\n\n<Attributes.Title>Justify</Attributes.Title>\n\n```ts\ntype Justify =\n  | 'flex-start'\n  | 'center'\n  | 'flex-end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly'\n```\n\n<Attributes.Title>AlignItems</Attributes.Title>\n\n```ts\ntype AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'\n```\n\n<Attributes.Title>AlignContent</Attributes.Title>\n\n```ts\ntype AlignContent =\n  | 'stretch'\n  | 'center'\n  | 'flex-start'\n  | 'flex-end'\n  | 'space-between'\n  | 'space-around'\n```\n\n<Attributes.Title>Direction</Attributes.Title>\n\n```ts\ntype Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse'\n```\n\n<Attributes.Title>Wrap</Attributes.Title>\n\n```ts\ntype Wrap = 'nowrap' | 'wrap' | 'wrap-reverse'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/icons.mdx",
    "content": "import Title from 'lib/components/playground/title'\nimport Github from '@geist-ui/icons/github'\nimport { Spacer, Tabs, Snippet } from 'components'\nimport { Layout, Playground, Attributes, IconsGallery } from 'lib/components'\n\nexport const meta = {\n  title: 'Icons',\n  group: 'General',\n}\n\n## Icons\n\nDisplay semantic vector graphics in SVG format.\n\n<Title title=\"Installation\" desc=\"Install the package in your project directory.\" />\n<Tabs initialValue=\"yarn\">\n  <Tabs.Item label=\"Yarn\" value=\"yarn\">\n    <Spacer h={0.6} />\n    <Snippet width=\"400px\">yarn add @geist-ui/icons</Snippet>\n  </Tabs.Item>\n  <Tabs.Item label=\"npm\" value=\"npm\">\n    <Spacer h={0.6} />\n    <Snippet width=\"400px\">npm i @geist-ui/icons</Snippet>\n  </Tabs.Item>\n</Tabs>\n\n<Playground\n  title=\"Import\"\n  scope={{ Github, Spacer }}\n  code={`\n// import * as Icon from '@geist-ui/icons'\n// or\n// import { Github } from '@geist-ui/icons'\n// or, for tree-shaking:\n// import Github from '@geist-ui/icons/github'\n\n<Github />\n`} />\n\n<Playground\n  title=\"Color\"\n  scope={{ Github }}\n  code={`\n<Github color=\"red\" />\n`}\n/>\n\n<Playground\n  title=\"Sizes\"\n  scope={{ Github, Spacer }}\n  code={`\n<>\n  <Github size={16} /> <Spacer inline w={.35} />\n  <Github size={20} /> <Spacer inline w={.35} />\n  <Github size={24} /> <Spacer inline w={.35} />\n  <Github size={28} /> <Spacer inline w={.35} />\n  <Github size={32} /> <Spacer inline w={.35} />\n  <Github size={36} />\n</>\n`}\n/>\n\n<IconsGallery />\n\n<Attributes edit=\"/pages/en-us/components/icons.mdx\">\n<Attributes.Title>Icon.Props</Attributes.Title>\n\n| Attribute | Description  | Type            | Accepted values                  | Default |\n| --------- | ------------ | --------------- | -------------------------------- | ------- |\n| **color** | Icon color   | `string`        | -                                | -       |\n| **size**  | Icon size    | `number`        | -                                | -       |\n| ...       | Native props | `SVGAttributes` | `'id', 'name', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/image.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Image, Display, Code } from 'components'\n\nexport const meta = {\n  title: 'Image',\n  group: 'Data Display',\n}\n\n## Image\n\nDisplay image content.\n\n<Playground\n  title=\"Basic\"\n  scope={{ Image }}\n  code={`\n<Image width=\"280px\" height=\"160px\" src=\"/images/geist-banner.png\" />\n`}\n/>\n\n<Playground\n  title=\"Skeleton\"\n  desc=\"`Image` will show skeleton animation after `width` and `height` props are set.\"\n  scope={{ Image }}\n  code={`\n<Image width=\"280px\" height=\"160px\"\n  src=\"http://www.deelay.me/2000/https://geist-ui.dev/images/geist-banner.png\" />\n`}\n/>\n\n<Playground\n  title=\"Browser\"\n  desc=\"Add a browser style wrapper to the image.\"\n  scope={{ Image, Display, Code }}\n  code={`\n<Image.Browser url=\"https://geist-ui.dev/en-us/guide/introduction\" anchorProps={{ rel: 'nofollow' }}>\n  <Image width=\"525px\" height=\"300px\" src=\"/images/geist-banner.png\" />\n</Image.Browser>\n`}\n/>\n\n<Playground\n  title=\"Browser Invert\"\n  scope={{ Image, Display, Code }}\n  code={`\n<Image.Browser url=\"https://geist-ui.dev/en-us/guide/introduction\" invert>\n  <Image width=\"525px\" height=\"300px\" src=\"/images/geist-banner-dark.png\" />\n</Image.Browser>\n`}\n/>\n\n<Playground\n  title=\"Compose\"\n  desc=\"Show `Image` in `Display` component.\"\n  scope={{ Image, Display, Code }}\n  code={`\n<Display shadow caption={<p>Set the <Code>height</Code> to reduces the possibility of page rerender.</p>}>\n  <Image height=\"246px\" src=\"/images/geist-banner-text.png\" />\n</Display>\n`}\n/>\n\n<Playground\n  title=\"SVG\"\n  desc=\"Render svg strings directly\"\n  scope={{ Image }}\n  code={`\n() => {\n  const svg = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15px\" height=\"15px\" viewBox=\"0 0 15 15\" fill=\"none\">\n      <path d=\"M12.5 8V7.83333C12.5 7.09695 11.903 6.5 11.1667 6.5H10C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11C11.8284 9.5 12.5 10.1716 12.5 11C12.5 11.8284 11.8284 12.5 11 12.5H10C9.17157 12.5 8.5 11.8284 8.5 11M8 6.5H3M5.5 6.5V13M0.5 0.5H14.5V14.5H0.5V0.5Z\" stroke=\"black\"/></svg>\\`\n  return <Image width=\"100px\" height=\"50px\" src={svg} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/image.mdx\">\n<Attributes.Title>Image.Props</Attributes.Title>\n\n| Attribute             | Description                             | Type                | Accepted values           | Default |\n| --------------------- | --------------------------------------- | ------------------- | ------------------------- | ------- |\n| **src**               | image src                               | `string`            | -                         | -       |\n| **disableSkeleton**   | disable skeleton animation when loading | `boolean`           | -                         | `false` |\n| **disableAutoResize** | disable zooming when width is too small | `boolean`           | -                         | `false` |\n| **maxDelay**(ms)      | max duration of animation               | `number`            | -                         | `3000`  |\n| ...                   | native props                            | `ImgHTMLAttributes` | `'alt', 'className', ...` | -       |\n\n<Attributes.Title>Image.Browser.Props</Attributes.Title>\n\n| Attribute        | Description                           | Type                   | Accepted values          | Default |\n| ---------------- | ------------------------------------- | ---------------------- | ------------------------ | ------- |\n| **title**        | show text title (when \"url\" is unset) | `string`               | -                        | -       |\n| **url**          | show url on browser address input     | `string`               | -                        | -       |\n| **showFullLink** | show full url                         | `boolean`              | -                        | `false` |\n| **invert**       | invert colors                         | `boolean`              | -                        | `false` |\n| **anchorProps**  | props of element `a`                  | `AnchorHTMLAttributes` | -                        | `{}`    |\n| ...              | native props                          | `HTMLAttributes`       | `'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/index.js",
    "content": "import redirect from 'lib/redirect'\n\nexport default redirect('/en-us/components/text')\n"
  },
  {
    "path": "pages/en-us/components/input.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport GitIcon from '@geist-ui/icons/github'\nimport { Input, Spacer, Button, Code, Text, Dot } from 'components'\n\nexport const meta = {\n  title: 'Input',\n  group: 'Data Entry',\n}\n\n## Input\n\nRetrieve text input from a user.\n\nThe Input contain an additional Hooks, see subsection [useInput](/en-us/hooks/use-input) for details.\n\n<Playground\n  desc=\"Basic input field.\"\n  scope={{ Input }}\n  code={`\n<Input placeholder=\"Geist UI\" />\n`}\n/>\n\n<Playground\n  title=\"Sizes\"\n  desc=\"Inputs of different sizes.\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input scale={1/3} placeholder=\"Scale 1/3\" /> <Spacer h={.5} />\n  <Input scale={2/3} placeholder=\"Scale 2/3\" /> <Spacer h={.5} />\n  <Input placeholder=\"Scale 1\" /> <Spacer h={.5} />\n  <Input scale={4/3} placeholder=\"Scale 4/3\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"Set width\"\n  desc=\"Specify width or other styles.\"\n  scope={{ Input }}\n  code={`\n<Input placeholder=\"Geist UI\" width=\"100%\" />\n`}\n/>\n\n<Playground\n  title=\"unwritable\"\n  desc=\"Disable interactive inputs.\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input disabled placeholder=\"Disabled\" />\n  <Spacer h={.5} />\n  <Input readOnly initialValue=\"readOnly\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"inline label\"\n  desc=\"Show a short label in the line.\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input label=\"username\" placeholder=\"Geist UI\" />\n  <Spacer h={.5} />\n  <Input labelRight=\".com\" placeholder=\"https://github\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"block label\"\n  desc=\"Labels for custom styles.\"\n  scope={{ Input, Spacer, Text, Code, Dot }}\n  code={`\n<>\n  <Input placeholder=\"Geist UI\">\n    Username\n  </Input>\n  <Spacer />\n  <Input placeholder=\"Post title\" width=\"50%\">\n    <Text h3>Title</Text>\n  </Input>\n  <Spacer />\n  <Input placeholder=\"GitHub Actions\" width=\"50%\">\n    <Dot type=\"warning\">\n      <Text small>Problem area for <Code>deployment</Code></Text>\n    </Dot>\n  </Input>\n</>\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Differentiate states by color.\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input type=\"secondary\" initialValue=\"Geist UI\" />\n  <Spacer h={.5} />\n  <Input type=\"success\" initialValue=\"Geist UI\" />\n  <Spacer h={.5} />\n  <Input type=\"warning\" initialValue=\"Geist UI\" />\n  <Spacer h={.5} />\n  <Input type=\"error\" initialValue=\"Geist UI\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"Icon\"\n  desc=\"Specify an icon component.\"\n  scope={{ Input, GitIcon, Spacer }}\n  code={`\n<>\n  <Input icon={<GitIcon />} placeholder=\"GitHub\" />\n  <Spacer h={.5} />\n  <Input iconRight={<GitIcon />} placeholder=\"GitHub\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"Clearable\"\n  desc=\"Add a clear button in the input box.\"\n  scope={{ Input }}\n  code={`\n<>\n  <Input clearable initialValue=\"Geist UI\" placeholder=\"Geist UI\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"Password\"\n  scope={{ Input }}\n  code={`\n<Input.Password initialValue=\"123456abc\" />\n`}\n/>\n\n<Playground\n  title=\"Get Change\"\n  desc=\"Capture changes in input.\"\n  scope={{ Input }}\n  code={`\n() => {\n  const [value, setValue] = React.useState()\n  const handler = (e) => {\n    setValue(e.target.value)\n    console.log(e.target.value)\n  }\n  return (\n    <Input value={value} onChange={handler} placeholder=\"Geist UI\" />\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Imperative API\"\n  desc=\"Update component in an uncontrolled way.\"\n  scope={{ Input, Spacer, Button }}\n  code={`\n() => {\n  const ref = React.useRef(null)\n  const setChange = () => {\n    ref && (ref.current.value = Math.random().toString(32))\n  }\n  return (\n    <>\n      <Input initialValue=\"Hello\" onChange={e => console.log(e.target.value)} ref={ref} />\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/3} onClick={setChange}>set value</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/input.mdx\">\n<Attributes.Title>Input.Props</Attributes.Title>\n\n| Attribute         | Description                   | Type                                           | Accepted values                   | Default   |\n| ----------------- | ----------------------------- | ---------------------------------------------- | --------------------------------- | --------- |\n| **value**         | input value                   | `string`                                       | -                                 | -         |\n| **initialValue**  | initial value                 | `string`                                       | -                                 | -         |\n| **placeholder**   | placeholder                   | `string`                                       | -                                 | -         |\n| **type**          | current type                  | `InputTypes`                                   | [InputTypes](#inputtypes)         | `default` |\n| **htmlType**      | native type attr              | `string`                                       | -                                 | `text`    |\n| **readOnly**      | native attr                   | `boolean`                                      | -                                 | `false`   |\n| **disabled**      | disable input                 | `boolean`                                      | -                                 | `false`   |\n| **clearable**     | show clear icon               | `boolean`                                      | -                                 | `false`   |\n| **label**         | text label for input          | `string`                                       | -                                 | -         |\n| **labelRight**    | text label at right for input | `string`                                       | -                                 | -         |\n| **icon**          | icon for input                | `React.ReactNode`                              | -                                 | -         |\n| **iconRight**     | icon at right for input       | `React.ReactNode`                              | -                                 | -         |\n| **iconClickable** | icons are clickable           | `boolean`                                      | -                                 | `false`   |\n| **onIconClick**   | click icon event              | `(e: React.ChangeEvent) => void`               | -                                 | -         |\n| **onChange**      | change event                  | `(e: React.ChangeEvent) => void`               | -                                 | -         |\n| **onClearClick**  | clear icon event              | `(e: React.MouseEvent) => void`                | -                                 | -         |\n| **ref**           | forwardRef                    | <Code>Ref<HTMLInputElement &#124; null></Code> | -                                 | -         |\n| ...               | native props                  | `InputHTMLAttributes`                          | `'alt', 'type', 'className', ...` | -         |\n\n<Attributes.Title>Input.Password.Props</Attributes.Title>\n\n| Attribute      | Description      | Type          | Accepted values             | Default |\n| -------------- | ---------------- | ------------- | --------------------------- | ------- |\n| **hideToggle** | hide toggle icon | `boolean`     | -                           | `false` |\n| ...            | input props      | `Input.Props` | [Input.Props](#input.props) | -       |\n\n<Attributes.Title>InputTypes</Attributes.Title>\n\n```ts\ntype InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>useInput</Attributes.Title>\n\n```ts\ntype useInput = (initialValue: string) => {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  reset: () => void\n  bindings: {\n    value: string\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  }\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/keyboard.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Keyboard } from 'components'\n\nexport const meta = {\n  title: 'Keyboard',\n  group: 'Data Display',\n}\n\n## Keyboard\n\nDisplay keyboard input that triggers an action.\n\nThe `Keyboard` can only display layout styles, if you need to bind the keyboard events, please read subsection [useKeyboard](/en-us/hooks/use-keyboard).\n\n<Playground\n  scope={{ Keyboard }}\n  code={`\n<Keyboard>f</Keyboard>\n`}\n/>\n\n<Playground\n  title=\"modifiers\"\n  scope={{ Keyboard }}\n  code={`\n<div>\n  <Keyboard command mr=\"10px\" />\n  <Keyboard shift mr=\"10px\" />\n  <Keyboard option mr=\"10px\" />\n  <Keyboard ctrl mr=\"10px\" />\n</div>\n`}\n/>\n\n<Playground\n  title=\"combination\"\n  scope={{ Keyboard }}\n  code={`\n<div>\n  <Keyboard command mr=\"10px\">f</Keyboard>\n  <Keyboard shift mr=\"10px\">e</Keyboard>\n  <Keyboard option ctrl mr=\"10px\">b</Keyboard>\n</div>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/keyboard.mdx\">\n<Attributes.Title>Keyboard.Props</Attributes.Title>\n\n| Attribute   | Description      | Type                   | Accepted values               | Default |\n| ----------- | ---------------- | ---------------------- | ----------------------------- | ------- |\n| **command** | show command key | `boolean`              | -                             | `false` |\n| **shift**   | show shift key   | `boolean`              | -                             | `false` |\n| **option**  | show option key  | `boolean`              | -                             | `false` |\n| **ctrl**    | show ctrl key    | `boolean`              | -                             | `false` |\n| ...         | native props     | `KeygenHTMLAttributes` | `'keyType', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/link.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Link, Text, Code, Spacer } from 'components'\nimport NextLink from 'next/link'\n\nexport const meta = {\n  title: 'Link',\n  group: 'Navigation',\n}\n\n## Link\n\nHyperlinks between pages.\n\n<Playground\n  scope={{ Link }}\n  code={`\n<Link href=\"#\">HTTP is stateless, but not sessionless.</Link>\n`}\n/>\n\n<Playground\n  title=\"highlight\"\n  desc=\"Distinguish links with different colors.\"\n  scope={{ Link }}\n  code={`\n<Link href=\"#\" color>HTTP is stateless, but not sessionless.</Link>\n`}\n/>\n\n<Playground\n  title=\"With Icon\"\n  desc=\"Show an icon in the link.\"\n  scope={{ Link, Spacer }}\n  code={`\n<>\n  <Link href=\"#\" icon>HTTP is stateless, but not sessionless.</Link>\n  <Spacer h={.5} />\n  <Link href=\"#\" icon color>HTTP is stateless, but not sessionless.</Link>\n</>\n`}\n/>\n\n<Playground\n  title=\"variant\"\n  desc=\"Different styles of links.\"\n  scope={{ Link, Text }}\n  code={`\n<>\n  <Text><Link href=\"#\">HTTP is stateless, but not sessionless.</Link></Text>\n  <Text><Link href=\"#\" color>HTTP is stateless, but not sessionless.</Link></Text>\n  <Text><Link href=\"#\" underline>HTTP is stateless, but not sessionless.</Link></Text>\n  <Text><Link href=\"#\" color underline>HTTP is stateless, but not sessionless.</Link></Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"block\"\n  desc=\"Display as a separate block.\"\n  scope={{ Link }}\n  code={`\n<Link href=\"#\" block>HTTP is stateless, but not sessionless.</Link>\n`}\n/>\n\n<Playground\n  title={\n    <>\n      With <Code>next/link</Code>\n    </>\n  }\n  desc=\"Use `Link` with NextJS without any configuration.\"\n  scope={{ Link, NextLink }}\n  code={`\n<NextLink href=\"/en-us/components/button\">\n  <Link block>Docs of Button</Link>\n</NextLink>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/link.mdx\">\n<Attributes.Title>Link.Props</Attributes.Title>\n\n| Attribute     | Description                 | Type                                            | Accepted values        | Default |\n| ------------- | --------------------------- | ----------------------------------------------- | ---------------------- | ------- |\n| **href**      | link url                    | `string`                                        | -                      | -       |\n| **color**     | display color for link      | `boolean`                                       | -                      | `false` |\n| **icon**      | show icon                   | `boolean`                                       | -                      | `false` |\n| **underline** | display underline           | `boolean`                                       | -                      | `false` |\n| **block**     | display as a separate block | `boolean`                                       | -                      | `false` |\n| **ref**       | forwardRef                  | <Code>Ref<HTMLAnchorElement &#124; null></Code> | -                      | -       |\n| ...           | native props                | `AnchorHTMLAttributes`                          | `'rel', 'target', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/loading.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Loading, Spacer, Grid } from 'components'\n\nexport const meta = {\n  title: 'Loading',\n  group: 'Feedback',\n}\n\n## Loading\n\nIndicate an action running in the background.\n\n<Playground\n  scope={{ Loading, Spacer }}\n  code={`\n<Loading />\n`}\n/>\n\n<Playground\n  title=\"with text\"\n  desc=\"Customize text next to icon.\"\n  scope={{ Loading }}\n  code={`\n<Loading>Loading</Loading>\n`}\n/>\n\n<Playground\n  title=\"types\"\n  desc=\"Loading indicators in different states.\"\n  scope={{ Loading, Grid }}\n  code={`\n<Grid.Container gap={2.5}>\n  <Grid xs={24}>\n    <Loading type=\"success\" />\n  </Grid>\n  <Grid xs={24}>\n    <Loading type=\"secondary\" />\n  </Grid>\n  <Grid xs={24}>\n    <Loading type=\"warning\" />\n  </Grid>\n   <Grid xs={24}>\n    <Loading type=\"error\" />\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"spaces\"\n  desc=\"Customize the space between points. (the ratio is relative to the current `size`)\"\n  scope={{ Loading, Grid }}\n  code={`\n<Grid.Container gap={2.5}>\n  <Grid xs={24}>\n    <Loading spaceRatio={2.5} />\n  </Grid>\n  <Grid xs={24}>\n    <Loading spaceRatio={0.5} />\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/loading.mdx\">\n<Attributes.Title>Loading.Props</Attributes.Title>\n\n| Attribute      | Description                        | Type             | Accepted values                   | Default   |\n| -------------- | ---------------------------------- | ---------------- | --------------------------------- | --------- |\n| **type**       | bg-color type                      | `LoadingTypes`   | [LoadingTypes](#loadingtypes)     | `default` |\n| **color**      | custom bg color                    | `string`         | -                                 | -         |\n| **spaceRatio** | percentage of space between points | `number`         | -                                 | 1         |\n| ...            | native props                       | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |\n\n<Attributes.Title>LoadingTypes</Attributes.Title>\n\n```ts\ntype LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/modal.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Modal, Button, Code, useModal } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: 'Modal',\n  group: 'Feedback',\n}\n\n## Modal\n\nDisplay popup content that requires attention or provides additional information.\nIf you just need to prompt for a text message, try component [Toast](/en-us/components/toast).\n\nThe Modal contain an additional Hooks, see subsection [useModal](/en-us/hooks/use-modal) for details.\n\n<Playground\n  title=\"Basic\"\n  desc=\"Use `visible` control whether `Modal` is displayed.\"\n  scope={{ Modal, Button, useState }}\n  code={`\n() => {\n  const [state, setState] = useState(false)\n  const handler = () => setState(true)\n  const closeHandler = (event) => {\n    setState(false)\n    console.log('closed')\n  }\n  return (\n    <div>\n      <Button auto onClick={handler}>Show Modal</Button>\n      <Modal visible={state} onClose={closeHandler}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>This is a modal</Modal.Subtitle>\n        <Modal.Content>\n          <p>Some content contained within the modal.</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>\n        <Modal.Action>Submit</Modal.Action>\n      </Modal>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title={\n    <>\n      With <Code>useModal</Code>\n    </>\n  }\n  desc=\"Use `hooks` for easier control `Modal`.\"\n  scope={{ Modal, Button, useModal }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n  return (\n    <>\n      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>\n      <Modal {...bindings}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>This is a modal</Modal.Subtitle>\n        <Modal.Content>\n          <p>Some content contained within the modal.</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>\n        <Modal.Action>Submit</Modal.Action>\n      </Modal>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Without Actions\"\n  desc=\"Hide all action buttons.\"\n  scope={{ Modal, Button, useState }}\n  code={`\n() => {\n  const [state, setState] = useState(false)\n  const handler = () => setState(true)\n  const closeHandler = (event) => {\n    setState(false)\n    console.log('closed')\n  }\n  return (\n    <div>\n      <Button auto onClick={handler}>Show Modal</Button>\n      <Modal visible={state} onClose={closeHandler}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>This is a modal</Modal.Subtitle>\n        <Modal.Content>\n          <p>Some content contained within the modal.</p>\n        </Modal.Content>\n      </Modal>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Disable Action\"\n  desc=\"Disable one of the buttons.\"\n  scope={{ Modal, Button, useState }}\n  code={`\n() => {\n  const [state, setState] = useState(false)\n  const handler = () => setState(true)\n  const closeHandler = (event) => {\n    setState(false)\n    console.log('closed')\n  }\n  return (\n    <>\n      <Button auto onClick={handler}>Show Modal</Button>\n      <Modal visible={state} onClose={closeHandler}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>This is a modal</Modal.Subtitle>\n        <Modal.Content>\n          <p>Some content contained within the modal.</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setState(false)}>Cancel</Modal.Action>\n        <Modal.Action disabled>Submit</Modal.Action>\n      </Modal>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Customizable\"\n  desc=\"Custom `width` or `className`.\"\n  scope={{ Modal, Button, useModal }}\n  code={`\n() => {\n  const { setVisible, bindings } = useModal()\n  return (\n    <div>\n      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>\n      <Modal width=\"35rem\" {...bindings}>\n        <Modal.Title>My Favorites</Modal.Title>\n        <Modal.Content>\n          <p>This is the width I want.</p>\n        </Modal.Content>\n      </Modal>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Loading\"\n  scope={{ Modal, Button, useModal }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n  return (\n    <>\n      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>\n      <Modal {...bindings}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>This is a modal</Modal.Subtitle>\n        <Modal.Content>\n          <p>Some content contained within the modal.</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>\n        <Modal.Action loading>Submit</Modal.Action>\n      </Modal>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Overlong\"\n  desc=\"Whether it is desktop or mobile, the content beyond the scope has been well handled.\"\n  scope={{ Modal, Button, useModal }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n  return (\n    <>\n      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>\n      <Modal {...bindings}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>Modal with a lot of content</Modal.Subtitle>\n        <Modal.Content>\n          <p>An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications. </p>\n          <p>An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications. </p>\n          <p>An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications. </p>\n          <p>An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications. </p>\n          <p>An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications. </p>\n          <p>An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications. </p>\n          <p>An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications.\n          An open-source design system for building modern websites and applications. </p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>\n        <Modal.Action>Submit</Modal.Action>\n      </Modal>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/modal.mdx\">\n<Attributes.Title>Modal.Props</Attributes.Title>\n\n| Attribute                | Description                      | Type                      | Accepted values                         | Default |\n| ------------------------ | -------------------------------- | ------------------------- | --------------------------------------- | ------- |\n| **visible**              | open or close                    | `boolean`                 | -                                       | `false` |\n| **onClose**              | open event                       | `() => void`              | -                                       | -       |\n| **onContentClick**       | event from modal content         | `(e: MouseEvent) => void` | -                                       | -       |\n| **wrapClassName**        | className of the modal dialog    | `string`                  | -                                       | -       |\n| **keyboard**             | press Esc to close modal         | `boolean`                 | -                                       | `true`  |\n| **disableBackdropClick** | click background and don't close | `boolean`                 | -                                       | `false` |\n| ...                      | native props                     | `HTMLAttributes`          | `'autoFocus', 'name', 'className', ...` | -       |\n\n<Attributes.Title>Modal.Title.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Modal.Subtitle.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Modal.Content.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Modal.Action.Props</Attributes.Title>\n\n| Attribute    | Description            | Type                                               | Accepted values          | Default |\n| ------------ | ---------------------- | -------------------------------------------------- | ------------------------ | ------- |\n| **passive**  | display passive mode   | `boolean`                                          | -                        | `false` |\n| **disabled** | disable current action | `boolean`                                          | -                        | `false` |\n| **onClick**  | click handler          | [(e: ModalActionEvent) => void](#modalactionevent) | -                        | -       |\n| **loading**  | show loading           | `boolean`                                          | -                        | `false` |\n| ...          | native props           | `ButtonHTMLAttributes`                             | `'id', 'className', ...` | -       |\n\n<Attributes.Title>useModal</Attributes.Title>\n\n```ts\ntype useModal = (initialVisible: boolean) => {\n  visible: boolean\n  setVisible: Dispatch<SetStateAction<boolean>>\n  currentRef: MutableRefObject<boolean>\n  bindings: {\n    visible: boolean\n    onClose: () => void\n  }\n}\n```\n\n<Attributes.Title>ModalActionEvent</Attributes.Title>\n\n```ts\ntype ModalActionEvent = MouseEvent<HTMLButtonElement> & {\n  close: () => void\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/note.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Note } from 'components'\n\nexport const meta = {\n  title: 'Note',\n  group: 'Feedback',\n}\n\n## Note\n\nDisplay text that requires attention or provides additional information.\n\n<Playground\n  desc=\"Show a piece of text or components.\"\n  scope={{ Note }}\n  code={`\n<Note>This note details something important.</Note>\n`}\n/>\n\n<Playground\n  title=\"secondary\"\n  scope={{ Note }}\n  code={`\n<Note type=\"secondary\">This note details something important.</Note>\n`}\n/>\n\n<Playground\n  title=\"status\"\n  scope={{ Note }}\n  code={`\n<>\n  <Note type=\"success\">This note details something important.</Note>\n  <br/>\n  <Note type=\"warning\">This note details something important.</Note>\n  <br/>\n  <Note type=\"error\">This note details something important.</Note>\n</>\n`}\n/>\n\n<Playground\n  title=\"hidden label\"\n  scope={{ Note }}\n  code={`\n<Note label={false}>Just a quick note!</Note>\n`}\n/>\n\n<Playground\n  title=\"custom label\"\n  scope={{ Note }}\n  code={`\n<Note label=\"custom\">This note uses a custom label.</Note>\n`}\n/>\n\n<Playground\n  title=\"Filled Variant\"\n  scope={{ Note }}\n  code={`\n<>\n  <Note label=\"custom\" filled>This note uses a custom label.</Note>\n  <br/>\n  <Note label={false} filled>Just a quick note!</Note>\n  <br/>\n  <Note type=\"success\" label=\"success\" filled>This note details a success.</Note>\n  <br/>\n  <Note type=\"warning\" label=\"warning\" filled>This note details a warning.</Note>\n  <br/>\n  <Note type=\"error\" label=\"error\" filled>This note details an error.</Note>\n  <br/>\n  <Note type=\"secondary\" filled>This note details something important.</Note>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/note.mdx\">\n<Attributes.Title>Note.Props</Attributes.Title>\n\n| Attribute  | Description               | Type                 | Accepted values          | Default   |\n| ---------- | ------------------------- | -------------------- | ------------------------ | --------- |\n| **type**   | note type                 | `NoteTypes`          | [NoteTypes](#nodetypes)  | `default` |\n| **label**  | show label or custom text | `boolean` / `string` | -                        | -         |\n| **filled** | fill color                | `boolean`            | -                        | `false`   |\n| ...        | native props              | `HTMLAttributes`     | `'id', 'className', ...` | -         |\n\n<Attributes.Title>NoteTypes</Attributes.Title>\n\n```ts\ntype NoteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/page.mdx",
    "content": "import { Page, Button } from 'components'\nimport { Layout, Playground, Attributes, MockPage } from 'lib/components'\n\nexport const meta = {\n  title: 'Page',\n  group: 'Layout',\n}\n\n## Page\n\nContainer of general for display page content.\n\n<Playground\n  desc=\"The content will be displayed in the center.\"\n  scope={{ Page, MockPage, Button }}\n  code={`\n() => {\n  const Child = () => (\n    <>\n      <h2>Hello, Everyone.</h2>\n      <p>This is a simulated page, you can click anywhere to close it.</p>\n    </>\n  )\n  const [visible, setVisible] = React.useState(false)\n  return (\n    <>\n      <Button onClick={() => setVisible(true)} auto>Show Page</Button>\n      <MockPage visible={visible} onClose={() => setVisible(false)}>\n        <Page><Child /></Page>\n      </MockPage>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Content\"\n  desc=\"Add `Header` and `Footer` for better layout.\"\n  scope={{ Page, MockPage, Button }}\n  code={`\n() => {\n  const [visible, setVisible] = React.useState(false)\n  return (\n    <>\n      <Button onClick={() => setVisible(true)} auto>Header & Footer</Button>\n      <MockPage visible={visible} onClose={() => setVisible(false)}>\n        <Page>\n          <Page.Header>\n            <h2>Header</h2>\n          </Page.Header>\n          <Page.Content>\n            <h2>Hello, Everyone.</h2>\n            <p>This is a simulated page, you can click anywhere to close it.</p>\n          </Page.Content>\n          <Page.Footer>\n            <h2>Footer</h2>\n          </Page.Footer>\n        </Page>\n      </MockPage>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/page.mdx\">\n<Attributes.Title>Page.Props</Attributes.Title>\n\n| Attribute       | Description                        | Type                              | Accepted values          | Default   |\n| --------------- | ---------------------------------- | --------------------------------- | ------------------------ | --------- |\n| **render**      | render mode                        | [PageRenderMode](#pagerendermode) | -                        | `default` |\n| **dotBackdrop** | show decorations in the background | `boolean`                         | -                        | `false`   |\n| **dotSize** | dot size in the background | `CSSProperties`                         | -                        | `1px`   |\n| **dotSpace** | space multiple between each dot | `number`                         | -                        | `1`   |\n| ...             | native props                       | `HTMLAttributes`                  | `'id', 'className', ...` | -         |\n\n<Attributes.Title>Page.Header.Props</Attributes.Title>\n\n| Attribute  | Description  | Type             | Accepted values          | Default |\n| ---------- | ------------ | ---------------- | ------------------------ | ------- |\n| **center** | align center | `boolean`        | -                        | `false` |\n| ...        | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title alias=\"Page.Body\">Page.Content.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Page.Footer.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>PageRenderMode</Attributes.Title>\n\n```ts\ntype PageRenderMode =\n  | 'default' // Normal rendering\n  | 'effect' // Render after the first effect trigger\n  | 'effect-seo' // like \"effect\", but prerender strings for SEO\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/pagination.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Pagination, Spacer } from 'components'\nimport ChevronRight from '@geist-ui/icons/chevronRight'\nimport ChevronLeft from '@geist-ui/icons/chevronLeft'\nimport ChevronRightCircle from '@geist-ui/icons/chevronRightCircle'\nimport ChevronLeftCircle from '@geist-ui/icons/chevronLeftCircle'\nimport ChevronRightCircleFill from '@geist-ui/icons/chevronRightCircleFill'\nimport ChevronLeftCircleFill from '@geist-ui/icons/chevronLeftCircleFill'\n\nexport const meta = {\n  title: 'Pagination',\n  group: 'Navigation',\n}\n\n## Pagination\n\nNavigation and identification between multiple pages.\n\n<Playground\n  scope={{ Pagination }}\n  code={`\n<Pagination count={20} initialPage={3} />\n`}\n/>\n\n<Playground\n  title=\"Limit\"\n  desc=\"The maximum number of pages that can be displayed\"\n  scope={{ Pagination }}\n  code={`\n<>\n  <Pagination count={10} limit={10} />\n  <Pagination count={5} />\n  <Pagination count={10} initialPage={6} limit={5} />\n  <Pagination count={10} initialPage={6} />\n  <Pagination count={30} initialPage={6} limit={10} />\n</>\n`}\n/>\n\n<Playground\n  title=\"Icon\"\n  desc=\"Customize buttons as icons.\"\n  scope={{\n    Spacer,\n    Pagination,\n    ChevronRight,\n    ChevronLeft,\n    ChevronRightCircle,\n    ChevronLeftCircle,\n    ChevronRightCircleFill,\n    ChevronLeftCircleFill,\n  }}\n  code={`\n<>\n  <Pagination count={5}>\n   <Pagination.Next><ChevronRight /></Pagination.Next>\n   <Pagination.Previous><ChevronLeft /></Pagination.Previous>\n  </Pagination>\n  <Spacer h={.5} />\n  <Pagination count={5}>\n   <Pagination.Next><ChevronRightCircle /></Pagination.Next>\n   <Pagination.Previous><ChevronLeftCircle /></Pagination.Previous>\n  </Pagination>\n  <Spacer h={.5} />\n  <Pagination count={5}>\n   <Pagination.Next><ChevronRightCircleFill /></Pagination.Next>\n   <Pagination.Previous><ChevronLeftCircleFill /></Pagination.Previous>\n  </Pagination>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/pagination.mdx\">\n<Attributes.Title>Pagination.Props</Attributes.Title>\n\n| Attribute       | Description                  | Type                     | Accepted values          | Default |\n| --------------- | ---------------------------- | ------------------------ | ------------------------ | ------- |\n| **initialPage** | the page selected by default | `number`                 | -                        | 1       |\n| **page**        | current page                 | `number`                 | -                        | 1       |\n| **count**       | the total number of pages    | `number`                 | -                        | 1       |\n| **limit**       | limit of display page        | `number`                 | -                        | 7       |\n| **onChange**    | change event                 | `(page: number) => void` | -                        | -       |\n| ...             | native props                 | `HTMLAttributes`         | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Pagination.Previous.Props</Attributes.Title>\n\n| Attribute | Description  | Type                   | Accepted values          | Default |\n| --------- | ------------ | ---------------------- | ------------------------ | ------- |\n| ...       | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Pagination.Next.Props</Attributes.Title>\n\n| Attribute | Description  | Type                   | Accepted values          | Default |\n| --------- | ------------ | ---------------------- | ------------------------ | ------- |\n| ...       | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/popover.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Popover, Spacer, Link } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: 'Popover',\n  group: 'Data Display',\n}\n\n## Popover\n\nThe floating box popped by clicking or hovering.\n\n<Playground\n  scope={{ Popover, Spacer, Link }}\n  code={`\n() => {\n  const content = () => (\n    <div style={{ padding: '0 10px' }}>\n      <Link href=\"#\">A hyperlink</Link>\n      <Spacer h={.5} />\n      <Link color href=\"#\">External link</Link>\n    </div>\n  )\n  return (\n    <Popover content={content}>\n      Menu\n    </Popover>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Preset Item\"\n  desc=\"Use preset `Item` component build layout.\"\n  scope={{ Popover, Spacer, Link }}\n  code={`\n() => {\n  const content = () => (\n    <>\n      <Popover.Item title>\n        <span>User Settings</span>\n      </Popover.Item>\n      <Popover.Item>\n        <Link href=\"#\">A hyperlink</Link>\n      </Popover.Item>\n      <Popover.Item>\n        <Link color href=\"#\">A hyperlink for edit profile</Link>\n      </Popover.Item>\n      <Popover.Item line />\n      <Popover.Item>\n        <span>Command-Line</span>\n      </Popover.Item>\n    </>\n  )\n  return (\n    <Popover content={content}>\n      Menu\n    </Popover>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Close Manual\"\n  desc=\"You can control when to close the pop-up box.\"\n  scope={{ Popover, Spacer, Link, useState }}\n  code={`\n() => {\n  const [visible, setVisible] = useState(false)\n  const changeHandler = (next) => {\n    setVisible(next)\n  }\n  const content = () => (\n    <div style={{ padding: '0 10px' }}>\n      <span onClick={() => setVisible(false)}>Click to close</span>\n      <Spacer h={.5} />\n      <span>Nothing</span>\n    </div>\n  )\n  return (\n    <Popover content={content} visible={visible}\n      onVisibleChange={changeHandler}>\n      Menu\n    </Popover>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/popover.mdx\">\n<Attributes.Title>Popover.Props</Attributes.Title>\n\n| Attribute                 | Description                                    | Type                          | Accepted values     | Default  |\n| ------------------------- | ---------------------------------------------- | ----------------------------- | ------------------- | -------- |\n| **content**               | content of pop-up                              | `ReactNode` `() => ReactNode` | -                   | -        |\n| **visible**               | visible or not                                 | `boolean`                     | -                   | `false`  |\n| **initialVisible**        | visible on initial                             | `boolean`                     | -                   | `false`  |\n| **hideArrow**             | hide arrow icon                                | `boolean`                     | -                   | `false`  |\n| **placement**             | position of the popover relative to the target | [Placement](#placement)       | -                   | `bottom` |\n| **trigger**               | tooltip trigger mode                           | `'click' / 'hover'`           | -                   | `click`  |\n| **enterDelay**(ms)        | delay before popover is shown                  | `number`                      | -                   | `100`    |\n| **leaveDelay**(ms)        | delay before popover is hidden                 | `number`                      | -                   | `0`      |\n| **offset**(px)            | distance between pop-up and target             | `number`                      | -                   | `12`     |\n| **portalClassName**       | className of pop-up box                        | `string`                      | -                   | -        |\n| **onVisibleChange**       | call when visibility of the popover is changed | `(visible: boolean) => void`  | -                   | -        |\n| **disableItemsAutoClose** | prevent close Popover when Items clicked       | `boolean`                     | -                   | -        |\n| ...                       | native props                                   | `HTMLAttributes`              | `'id', 'name', ...` | -        |\n\n<Attributes.Title alias=\"Popover.Option\">Popover.Item</Attributes.Title>\n\n| Attribute            | Description                        | Type      | Accepted values | Default |\n| -------------------- | ---------------------------------- | --------- | --------------- | ------- |\n| **line**             | show a line                        | `boolean` | -               | `false` |\n| **title**            | show text with title style         | `boolean` | -               | `false` |\n| **disableAutoClose** | prevent close Popover when clicked | `boolean` | -               | `false` |\n\n<Attributes.Title>Placement</Attributes.Title>\n\n```ts\ntype Placement = 'top'\n  | 'topStart',\n  | 'topEnd',\n  | 'left',\n  | 'leftStart',\n  | 'leftEnd',\n  | 'bottom',\n  | 'bottomStart',\n  | 'bottomEnd',\n  | 'right',\n  | 'rightStart',\n  | 'rightEnd',\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/progress.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Progress, Spacer, useTheme, Button } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: 'Progress',\n  group: 'Feedback',\n}\n\n## Progress\n\nDisplay progress relative to a limit or related to a task.\n\n<Playground\n  scope={{ Progress }}\n  code={`\n<Progress value={50} />\n`}\n/>\n\n<Playground\n  title=\"Custom Max\"\n  desc=\"Modify the maximum value of progress.\"\n  scope={{ Progress }}\n  code={`\n<Progress value={45} max={50} />\n`}\n/>\n\n<Playground\n  title=\"Dynamic Colors\"\n  desc=\"You can specify the color of the progress in any range.\"\n  scope={{ Progress, useState, useTheme, Button, Spacer }}\n  code={`\n() => {\n  const theme = useTheme()\n  const [value, setValue] = useState(20)\n  const colors = {\n    20: theme.palette.error,\n    40: theme.palette.warning,\n    60: theme.palette.success,\n    80: '#000',\n  }\n  return (\n    <>\n      <Progress value={value} colors={colors} />\n      <Spacer />\n      <Button onClick={() => setValue(value + 20)} auto scale={0.5}>Increase</Button>\n      <Spacer w={.5} inline />\n      <Button onClick={() => setValue(20)} auto scale={0.5} type=\"abort\">Reset</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"We prepared some different styles in advance.\"\n  scope={{ Progress, Spacer }}\n  code={`\n<>\n  <Progress type=\"secondary\" value={10} />\n  <Spacer />\n  <Progress type=\"success\" value={45} />\n  <Spacer />\n  <Progress type=\"warning\" value={100} />\n  <Spacer />\n  <Progress type=\"error\" value={21} />\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/progress.mdx\">\n<Attributes.Title>Progress.Props</Attributes.Title>\n\n| Attribute       | Description            | Type                        | Accepted values                 | Default   |\n| --------------- | ---------------------- | --------------------------- | ------------------------------- | --------- |\n| **value**       | current value          | `number`                    | -                               | 0         |\n| **max**         | max value              | `number`                    | -                               | 100       |\n| **fixedTop**    | fix progress to top    | `boolean`                   | -                               | `false`   |\n| **fixedBottom** | fix progress to bottom | `boolean`                   | -                               | `false`   |\n| **colors**      | custom colors          | `{ [key: number]: string }` | -                               | -         |\n| **type**        | predefined state types | `ProgressTypes`             | [ProgressTypes](#progresstypes) | `default` |\n| ...             | native props           | `ProgressHTMLAttributes`    | `'aria-busy', ...`              | -         |\n\n<Attributes.Title>ProgressTypes</Attributes.Title>\n\n```ts\ntype ProgressTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/radio.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Radio, Spacer, Code } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: 'Radio',\n  group: 'Data Entry',\n}\n\n## Radio\n\nProvides single user input from a selection of options.\n\n<Playground\n  scope={{ Radio }}\n  code={`\n<Radio checked={false}>Option 1</Radio>\n`}\n/>\n\n<Playground\n  title=\"Group\"\n  desc=\"A group of radio components.\"\n  scope={{ Radio, useState }}\n  code={`\n() => {\n  const [state, setState] = useState('1')\n  const handler = val => {\n    setState(val)\n    console.log(val)\n  }\n  return (\n    <>\n      <Radio.Group value={state} onChange={handler}>\n        <Radio value=\"1\">Option 1</Radio>\n        <Radio value=\"2\">Option 2</Radio>\n      </Radio.Group>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Differentiate states by color.\"\n  scope={{ Radio, Spacer }}\n  code={`\n    <>\n      <Radio checked={false} type=\"default\">Default</Radio>\n      <Spacer h={.5} />\n      <Radio checked={false} type=\"success\">Success</Radio>\n      <Spacer h={.5} />\n      <Radio checked={false} type=\"warning\">Warning</Radio>\n      <Spacer h={.5} />\n      <Radio checked={false} type=\"error\">Error</Radio>\n    </>\n`}\n/>\n\n<Playground\n  title=\"Description\"\n  desc=\"`Description` can be combined with other components.\"\n  scope={{ Radio, Code }}\n  code={`\n<Radio.Group value=\"1\" onChange={val => console.log(val)}>\n  <Radio value=\"1\">\n    Option 1\n    <Radio.Description>Description for Option1</Radio.Description>\n  </Radio>\n  <Radio value=\"2\">\n    Option 2\n    <Radio.Desc><Code>Description</Code> for Option2</Radio.Desc>\n  </Radio>\n</Radio.Group>\n`}\n/>\n\n<Playground\n  title=\"Disabled\"\n  desc=\"Disable all radios.\"\n  scope={{ Radio, useState, Code }}\n  code={`\n<Radio.Group value=\"1\" disabled>\n  <Radio value=\"1\">Option 1</Radio>\n  <Radio value=\"2\">Option 2</Radio>\n</Radio.Group>\n`}\n/>\n\n<Playground\n  title=\"Row\"\n  desc=\"Horizontal arrangement.\"\n  scope={{ Radio, Code }}\n  code={`\n<Radio.Group value=\"1\" useRow>\n  <Radio value=\"1\">\n    Option 1\n    <Radio.Desc>Description for Option1</Radio.Desc>\n  </Radio>\n  <Radio value=\"2\">\n    Option 2\n    <Radio.Desc>Description for Option2</Radio.Desc>\n  </Radio>\n</Radio.Group>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/radio.mdx\">\n<Attributes.Title>Radio.Props</Attributes.Title>\n\n| Attribute    | Description                   | Type                                           | Accepted values           | Default   |\n| ------------ | ----------------------------- | ---------------------------------------------- | ------------------------- | --------- |\n| **checked**  | selected or not (in single)   | `boolean`                                      | -                         | `false`   |\n| **value**    | unique ident value (in group) | `string`                                       | -                         | -         |\n| **id**       | native attr                   | `string`                                       | -                         | -         |\n| **disabled** | disable current radio         | `boolean`                                      | -                         | `false`   |\n| **type**     | current type                  | `RadioTypes`                                   | [RadioTypes](#radiotypes) | `default` |\n| **onChange** | change event                  | `(e: RadioEvent) => void`                      | -                         | -         |\n| **ref**      | forwardRef                    | <Code>Ref<HTMLInputElement &#124; null></Code> | -                         | -         |\n| ...          | native props                  | `InputHTMLAttributes`                          | `'id', 'className', ...`  | -         |\n\n<Attributes.Title>Radio.Group.Props</Attributes.Title>\n\n| Attribute        | Description          | Type                      | Accepted values          | Default |\n| ---------------- | -------------------- | ------------------------- | ------------------------ | ------- |\n| **initialValue** | initial value        | `string`                  | -                        | -       |\n| **value**        | selected child radio | `string`                  | -                        | -       |\n| **useRow**       | horizontal layout    | `boolean`                 | -                        | `false` |\n| **disabled**     | disable all radios   | `boolean`                 | -                        | `false` |\n| **onChange**     | change event         | `(value: string) => void` | -                        | -       |\n| ...              | native props         | `HTMLAttributes`          | `'id', 'className', ...` | -       |\n\n<Attributes.Title alias=\"Radio.Desc\">Radio.Description.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>RadioTypes</Attributes.Title>\n\n```ts\ntype RadioTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/rating.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Rating, Grid, Spacer } from 'components'\nimport { useState } from 'react'\nimport { Award, Github } from '@geist-ui/icons'\n\nexport const meta = {\n  title: 'Rating',\n  group: 'Feedback',\n}\n\n## Rating\n\nDisplay an indicator of rankings with stars.\n\n<Playground\n  title=\"Default\"\n  desc=\"A default rating component with initializers and callbacks.\"\n  scope={{ Rating, Grid, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState(1)\n  const [locked, setLocked] = useState(false)\n  return(\n    <Grid.Container gap={2}>\n      <Grid xs={24} md={8} justify=\"center\">\n        <Rating onLockedChange={setLocked} value={value} onValueChange={setValue}/>\n      </Grid>\n      <Grid xs={12} md={8} justify=\"center\">Selection: {value}</Grid>\n      <Grid xs={12} md={8} justify=\"center\">Locked: {locked ? \"true\" : \"false\"}</Grid>\n    </Grid.Container>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  desc=\"Pass the property `type` to the Rating component.\"\n  scope={{ Rating, Grid }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={24} sm={24} md={8} justify=\"center\"><Rating type=\"success\"/></Grid>\n  <Grid xs={24} sm={12} md={8} justify=\"center\"><Rating type=\"error\"/></Grid>\n  <Grid xs={24} sm={12} md={8} justify=\"center\"><Rating type=\"warning\"/></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"Custom Amount\"\n  desc=\"Customize the amount of stars.\"\n  scope={{ Rating, Spacer }}\n  code={`\n<>\n  <Rating count={2} />\n  <Spacer h={0.5} />\n  <Rating value={3} count={6} />\n  <Spacer h={0.5} />\n  <Rating value={4} count={8}/>\n</>\n`}\n/>\n\n<Playground\n  title=\"Icon\"\n  desc=\"Customize the icons of a rating.\"\n  scope={{ Rating, Award, Github, Spacer }}\n  code={`\n<>\n  <Rating\n     value={4}\n     count={6}\n     type=\"success\"\n     icon={<Github />} />\n  <Spacer h={0.5} />\n  <Rating count={7}  type=\"error\" icon={<Award />} />\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/rating.mdx\">\n<Attributes.Title>Rating.Props</Attributes.Title>\n\n| Attribute          | Description         | Type                    | Accepted values             | Default   |\n| ------------------ | ------------------- | ----------------------- | --------------------------- | --------- |\n| **type**           | rating type         | `RatingTypes`           | [RatingTypes](#ratingtypes) | `default` |\n| **icon**           | custom icon         | `JSX.Element`           | -                           | -         |\n| **count**          | rating star count   | `number`                | [RatingCount](#ratingcount) | `5`       |\n| **value**          | star values         | `number`                | [RatingValue](#ratingvalue) | -         |\n| **initialValue**   | initial star values | `number`                | [RatingValue](#ratingvalue) | `1`       |\n| **onValueChange**  | value change event  | `(value?: any) => void` | -                           | -         |\n| **locked**         | lock state          | `boolean`               | -                           | `false`   |\n| **onLockedChange** | locked change event | `(value?: any) => void` | -                           | -         |\n| ...                | native props        | `HTMLAttributes`        | -                           | -         |\n\n<Attributes.Title>RatingTypes</Attributes.Title>\n\n```ts\ntype RatingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>RatingCount</Attributes.Title>\n\n```ts\ntype RatingCount = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10\n```\n\n<Attributes.Title>RatingValue</Attributes.Title>\n\n```ts\ntype RatingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/select.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Select, Spacer, Code, Modal, useModal, Button } from 'components'\n\nexport const meta = {\n  title: 'Select',\n  group: 'Data Entry',\n}\n\n## Select\n\nDisplay a dropdown list of items.\n\nThe Select contain an additional Hooks, see subsection [useModal](/en-us/hooks/use-modal) for details.\n\n<Playground\n  desc=\"Basic usage.\"\n  scope={{ Select }}\n  code={`\n() => {\n  const handler = val => console.log(val)\n  return (\n    <Select placeholder=\"Choose one\" onChange={handler}>\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Differentiate states by color.\"\n  scope={{ Select, Spacer }}\n  code={`\n() => (\n  <>\n    <Select placeholder=\"Default\" type=\"default\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n    <Spacer h={.5} />\n    <Select type=\"success\" initialValue=\"1\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n    <Spacer h={.5} />\n    <Select type=\"warning\" initialValue=\"2\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n    <Spacer h={.5} />\n    <Select type=\"error\" initialValue=\"1\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n  </>\n)\n`}\n/>\n\n<Playground\n  title=\"Disabled\"\n  desc=\"Disable all options.\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"Choose one\" disabled>\n  <Select.Option value=\"1\">Option 1</Select.Option>\n  <Select.Option value=\"2\">Option 2</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Disabled Option\"\n  desc=\"disable specified options.\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"Choose one\">\n  <Select.Option value=\"1\" disabled>Option 1</Select.Option>\n  <Select.Option value=\"2\">Option 2</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Without Icon\"\n  desc=\"Hide icon on right.\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"Choose one\" pure>\n  <Select.Option value=\"1\">Option 1</Select.Option>\n  <Select.Option value=\"2\">Option 2</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Labels\"\n  desc=\"show data as a group.\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"Frameworks\">\n  <Select.Option label>JavaScript</Select.Option>\n  <Select.Option value=\"react\">React</Select.Option>\n  <Select.Option value=\"angular\">Angular</Select.Option>\n  <Select.Option label>Ruby</Select.Option>\n  <Select.Option value=\"rails\">Rails</Select.Option>\n  <Select.Option value=\"sinatra\">Sinatra</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Divider\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"Frameworks\">\n  <Select.Option value=\"react\">React</Select.Option>\n  <Select.Option value=\"angular\">Angular</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"rails\">Rails</Select.Option>\n  <Select.Option value=\"sinatra\">Sinatra</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Multiple\"\n  desc=\"`Select` supports multiple values to be selected.\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"Frameworks\" multiple width=\"200px\" initialValue={['1', '3', '4', '6']}>\n  <Select.Option value=\"1\">React</Select.Option>\n  <Select.Option value=\"2\">Angular</Select.Option>\n  <Select.Option value=\"3\">Vue</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"4\">Rails</Select.Option>\n  <Select.Option value=\"5\">Sinatra</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"6\">Express</Select.Option>\n  <Select.Option value=\"7\">Koa</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Multiple without clear\"\n  desc=\"`Select` supports multiple values to be selected without the clear icon.\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"Frameworks\" multiple width=\"200px\" clearable={false} initialValue={['1', '3', '4', '6']}>\n  <Select.Option value=\"1\">React</Select.Option>\n  <Select.Option value=\"2\">Angular</Select.Option>\n  <Select.Option value=\"3\">Vue</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"4\">Rails</Select.Option>\n  <Select.Option value=\"5\">Sinatra</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"6\">Express</Select.Option>\n  <Select.Option value=\"7\">Koa</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Compose\"\n  desc=\"Use with other components.\"\n  scope={{ Select, Code }}\n  code={`\n<Select placeholder=\"Choose one\" initialValue=\"1\">\n  <Select.Option value=\"1\"><Code>TypeScript</Code></Select.Option>\n  <Select.Option value=\"2\"><Code>JavaScript</Code></Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"Over width\"\n  desc=\"`Option` to show more text with adaptive width.\"\n  scope={{ Select, Spacer }}\n  code={`\n<>\n  <Select placeholder=\"Choose one\" value=\"1\" width=\"150px\">\n    <Select.Option value=\"1\">Truncate an overly long string</Select.Option>\n    <Select.Option value=\"2\">Option 2</Select.Option>\n  </Select>\n  <Spacer h={.5} />\n  <Select placeholder=\"Choose one\" value=\"1\" width=\"150px\" disableMatchWidth>\n    <Select.Option value=\"1\">Autoscale option width when text is too long</Select.Option>\n    <Select.Option value=\"2\">Option 2</Select.Option>\n  </Select>\n</>\n`}\n/>\n\n<Playground\n  title=\"Set parent element\"\n  desc=\"you can specify the container for drop-down box rendering.\"\n  scope={{ Select, Spacer, useModal, Modal, Button, Code }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n  return (\n    <>\n      <Button auto onClick={() => setVisible(true)}>Show Select</Button>\n      <Modal {...bindings}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Content id=\"customModalSelect\">\n          <Select placeholder=\"Choose one\" initialValue=\"1\"\n            getPopupContainer={() => document.getElementById('customModalSelect')}>\n            <Select.Option value=\"1\"><Code>TypeScript</Code></Select.Option>\n            <Select.Option value=\"2\"><Code>JavaScript</Code></Select.Option>\n          </Select>\n          <p>Scroll through the content to see the changes.</p>\n          <div style={{ height: '1200px' }}></div>\n          <p>Scroll through the content to see the changes.</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>\n      </Modal>\n    </>\n  )\n}`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/select.mdx\">\n<Attributes.Title>Select.Props</Attributes.Title>\n\n| Attribute                   | Description                                              | Type                                                | Accepted values             | Default         |\n| --------------------------- | -------------------------------------------------------- | --------------------------------------------------- | --------------------------- | --------------- |\n| **value**                   | selected value                                           | `string`, `string[]`                                | -                           | -               |\n| **initialValue**            | initial value                                            | `string`, `string[]`                                | -                           | -               |\n| **placeholder**             | placeholder string                                       | `string`                                            | -                           | -               |\n| **width**                   | css width value of select                                | `string`                                            | -                           | `initial`       |\n| **type**                    | current type                                             | `SelectTypes`                                       | [SelectTypes](#selecttypes) | `default`       |\n| **icon**                    | icon component                                           | `ComponentType`                                     | -                           | `SVG Component` |\n| **pure**                    | remove icon component                                    | `boolean`                                           | -                           | `false`         |\n| **multiple**                | support multiple selection                               | `boolean`                                           | -                           | `false`         |\n| **clearable**               | add clear icon on multiple selection (ignored otherwise) | `boolean`                                           | -                           | `true`          |\n| **disabled**                | disable current radio                                    | `boolean`                                           | -                           | `false`         |\n| **onChange**                | selected value                                           | <Code>(val: string &#124; string[]) => void </Code> | -                           | -               |\n| **dropdownClassName**       | className of dropdown menu                               | `string`                                            | -                           | -               |\n| **dropdownStyle**           | style of dropdown menu                                   | `object`                                            | -                           | -               |\n| **disableMatchWidth**       | disable Option from follow Select width                  | `boolean`                                           | -                           | `false`         |\n| **getPopupContainer**       | dropdown render parent element, the default is `body`    | `() => HTMLElement`                                 | -                           | -               |\n| **onDropdownVisibleChange** | dropdown change events                                   | `(visible: boolean) => void`                        | -                           | -               |\n| **ref**                     | forwardRef                                               | `SelectRef`                                         | [SelectRef](#selectref)     | -               |\n| ...                         | native props                                             | `HTMLAttributes`                                    | `'name', 'alt', ...`        | -               |\n\n<Attributes.Title>Select.Option.Props</Attributes.Title>\n\n| Attribute           | Description            | Type             | Accepted values     | Default |\n| ------------------- | ---------------------- | ---------------- | ------------------- | ------- |\n| **value**(required) | unique ident value     | `string`         | -                   | -       |\n| **disabled**        | disable current option | `boolean`        | -                   | `false` |\n| **divider**         | display a line         | `boolean`        | -                   | `false` |\n| **label**           | display a group title  | `boolean`        | -                   | `false` |\n| ...                 | native props           | `HTMLAttributes` | `'name', 'id', ...` | -       |\n\n<Attributes.Title>SelectRef</Attributes.Title>\n\n```ts\ntype SelectRef = {\n  focus: () => void\n  blur: () => void\n  scrollTo?: (options?: ScrollToOptions) => void\n}\n```\n\n<Attributes.Title>SelectTypes</Attributes.Title>\n\n```ts\ntype SelectTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/slider.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Slider, Spacer } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: 'Slider',\n  group: 'Data Entry',\n}\n\n## Slider\n\nDisplay the current value and an inputable range.\n\n<Playground\n  desc=\"Accept clicks or drag actions.\"\n  scope={{ Slider }}\n  code={`\n<Slider initialValue={20} />\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Differentiate states by color.\"\n  scope={{ Slider, Spacer }}\n  code={`\n    <>\n      <Slider type=\"default\" initialValue={20} />\n      <Spacer />\n      <Slider type=\"success\" initialValue={20} />\n      <Spacer />\n      <Slider type=\"warning\" initialValue={20} />\n      <Spacer />\n      <Slider type=\"error\" initialValue={20} />\n    </>\n`}\n/>\n\n<Playground\n  title=\"Disabled\"\n  desc=\"Do not respond to drag and click.\"\n  scope={{ Slider }}\n  code={`\n<Slider initialValue={50} disabled />\n`}\n/>\n\n<Playground\n  title=\"Step\"\n  desc=\"Different granularity.\"\n  scope={{ Slider }}\n  code={`\n<Slider step={10} showMarkers width=\"75%\" />\n`}\n/>\n\n<Playground\n  title=\"Range\"\n  desc=\"Specifies the maximum or minimum value of the Slider.\"\n  scope={{ Slider, Spacer }}\n  code={`\n<>\n  <Slider step={5} max={50} min={10} initialValue={25} showMarkers width=\"75%\" />\n  <Spacer />\n  <Slider step={0.2} max={1} min={0.2} initialValue={0.4} showMarkers width=\"75%\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"Event\"\n  desc=\"Get event when slide.\"\n  scope={{ Slider, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState()\n  const handler = val => {\n    console.log(val)\n    setValue(val)\n  }\n  return <Slider value={value} onChange={handler} width=\"75%\" />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/slider.mdx\">\n<Attributes.Title>Slider.Props</Attributes.Title>\n\n| Attribute        | Description                                        | Type                    | Accepted values                  | Default   |\n| ---------------- | -------------------------------------------------- | ----------------------- | -------------------------------- | --------- |\n| **initialValue** | initial value                                      | `number`                | -                                | 0         |\n| **value**        | slider value                                       | `number`                | -                                | 0         |\n| **type**         | current type                                       | `SliderTypes`           | [SliderTypes](#slidertypes)      | `default` |\n| **step**         | the granularity the slider can step through values | `number`                | -                                | 1         |\n| **max**          | the maximum value of slider                        | `number`                | -                                | 100       |\n| **min**          | the minimum value of slider                        | `number`                | -                                | 0         |\n| **disabled**     | disable slider interaction                         | `boolean`               | `false`                          |\n| **showMarkers**  | show each marker                                   | `boolean`               | -                                | `false`   |\n| **hideValue**    | hide slider value                                  | `boolean`               | -                                | `false`   |\n| **onChange**     | called when the value of silder changes            | `(val: number) => void` | -                                | -         |\n| ...              | native props                                       | `HTMLAttributes`        | `'id', 'name', 'className', ...` | -         |\n\n<Attributes.Title>SliderTypes</Attributes.Title>\n\n```ts\ntype SliderTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/snippet.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Snippet, Spacer, Code } from 'components'\n\nexport const meta = {\n  title: 'Snippet',\n  group: 'Others',\n}\n\n## Snippet\n\nDisplay a snippet of copyable code for the command line.\n\n<Playground\n  desc=\"Basic usage.\"\n  scope={{ Snippet }}\n  code={`\n<Snippet text=\"yarn add @geist-ui/core\" width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"width\"\n  desc=\"Specify width manually.\"\n  scope={{ Snippet }}\n  code={`\n<Snippet text=\"yarn add @geist-ui/core\" width=\"100%\" />\n`}\n/>\n\n<Playground\n  title=\"types\"\n  desc=\"Show different states with colors.\"\n  scope={{ Snippet, Spacer }}\n  code={`\n<>\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"dark\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"success\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"warning\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"error\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"secondary\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"lite\" width=\"300px\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"Multi Line\"\n  scope={{ Snippet }}\n  code={`\n<Snippet text={['cd project', 'now']} width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"without copy\"\n  desc=\"Hide icon for copy. (disable copy)\"\n  scope={{ Snippet }}\n  code={`\n<Snippet copy=\"prevent\" text=\"yarn add @geist-ui/core\" width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"custom symbol\"\n  scope={{ Snippet }}\n  code={`\n<Snippet symbol=\">\" text=\"yarn add @geist-ui/core\" width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"custom toast\"\n  scope={{ Snippet }}\n  code={`\n<Snippet toastText=\"Code copied!\" toastType=\"secondary\" text=\"yarn add @geist-ui/core\" width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"filled\"\n  scope={{ Snippet, Spacer }}\n  code={`\n<>\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"success\" filled width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"warning\" filled width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"error\" filled width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"secondary\" filled width=\"300px\" />\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/snippet.mdx\">\n<Attributes.Title>Snippet.Props</Attributes.Title>\n\n| Attribute     | Description             | Type                | Accepted values                  | Default                |\n| ------------- | ----------------------- | ------------------- | -------------------------------- | ---------------------- |\n| **text**      | code snippet            | `string` `string[]` | -                                | -                      |\n| **type**      | snippet types           | `SnippetTypes`      | [SnippetTypes](#snippettypes)    | `default`              |\n| **filled**    | filled style            | `boolean`           | -                                | `false`                |\n| **width**     | set CSS string          | `string`            | -                                | `initial`              |\n| **copy**      | function of copy button | `CopyTypes`         | [CopyTypes](#copytypes)          | `default`              |\n| **symbol**    | symbol snippet          | `string`            | -                                | `$`                    |\n| **toastText** | toast text              | `string`            | -                                | `Copied to clipboard!` |\n| **toastType** | toast type              | `ToastTypes`        | [ToastTypes](#toasttypes)        | `success`              |\n| ...           | native props            | `HTMLAttributes`    | `'id', 'name', 'className', ...` | -                      |\n\n<Attributes.Title>SnippetTypes</Attributes.Title>\n\n```ts\ntype SnippetTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n<Attributes.Title>CopyTypes</Attributes.Title>\n\n```ts\ntype CopyTypes = 'default' | 'silent' | 'prevent'\n```\n\n<Attributes.Title>SnippetTypes</Attributes.Title>\n\n```ts\ntype SnippetTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>ToastTypes</Attributes.Title>\n\n```ts\ntype ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/spacer.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Spacer, Grid } from 'components'\n\nexport const meta = {\n  title: 'Spacer',\n  group: 'Layout',\n}\n\n## Spacer\n\nProvide empty space.\n\n<Playground\n  title=\"Vertical\"\n  scope={{ Spacer, Grid }}\n  code={`\n<Grid.Container>\n  <Grid xs={24} style={{ background: '#444', borderRadius: '15px' }}>\n    <Spacer h={2}/>\n  </Grid>\n  <Spacer h={2}/>\n  <Grid xs={24} style={{ background: '#666', borderRadius: '15px' }}>\n    <Spacer h={3}/>\n  </Grid>\n  <Spacer h={3}/>\n  <Grid xs={24} style={{ background: '#999', borderRadius: '15px' }}>\n    <Spacer h={4}/>\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"Horizontal\"\n  scope={{ Spacer, Grid }}\n  code={`\n<Grid.Container>\n  <Grid xs={4} style={{ background: '#444', borderRadius: '15px' }} />\n  <Spacer w={5}/>\n  <Grid xs={4} style={{ background: '#444', borderRadius: '15px' }} />\n</Grid.Container>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/spacer.mdx\">\n<Attributes.Title>Spacer.Props</Attributes.Title>\n\n| Attribute  | Description    | Type               | Accepted values          | Default |\n| ---------- | -------------- | ------------------ | ------------------------ | ------- |\n| **w**      | x-axis spacing | `number` / `float` | -                        | 1       |\n| **h**      | y-axis spacing | `number` / `float` | -                        | 1       |\n| **inline** | inline space   | `boolean`          | -                        | `false` |\n| ...        | native props   | `HTMLAttributes`   | `'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/spinner.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Spinner } from 'components'\n\nexport const meta = {\n  title: 'Spinner',\n  group: 'Feedback',\n}\n\n## Spinner\n\nIndicate an action running in the background.\n\nAs an indicator of load waiting, see also component [Loading](/en-us/components/loading).\n\n<Playground\n  scope={{ Spinner }}\n  code={`\n<Spinner />\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/spinner.mdx\">\n<Attributes.Title>Spinner.Props</Attributes.Title>\n\n| Attribute | Description  | Type             | Accepted values          | Default |\n| --------- | ------------ | ---------------- | ------------------------ | ------- |\n| ...       | native props | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/table.mdx",
    "content": "import { Layout, Playground, PlaygroundTitle, Attributes } from 'lib/components'\nimport { Table, Spacer, Code, Text, Button } from 'components'\n\nexport const meta = {\n  title: 'Table',\n  group: 'Data Display',\n}\n\n## Table\n\nDisplay tabular data in format.\n\n<Playground\n  desc=\"Display formatted data in rows and columns.\"\n  scope={{ Table }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: 'string', default: '-' },\n    { property: 'bold', description: 'Bold style', type: 'boolean', default: 'true' },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\" label=\"type\" />\n      <Table.Column prop=\"default\" label=\"default\" />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"compose\"\n  desc=\"Show other components in the table.\"\n  scope={{ Table, Code, Text }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },\n    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\" label=\"type\" />\n      <Table.Column prop=\"default\" label=\"default\" />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"width\"\n  desc=\"Specifies the `width` of all or part of the columns.\"\n  scope={{ Table, Code, Text }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },\n    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" width={50} />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\" label=\"type\" />\n      <Table.Column prop=\"default\" label=\"default\" />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"actions\"\n  desc=\"Custom elements can be displayed in the table, and any changes will be immediately rendered.\"\n  scope={{ Table, Text, Button }}\n  code={`\n() => {\n  const dataSource = [\n    { property: 'type', description: 'Content type', operation: '' },\n    { property: 'Component', description: 'DOM element to use', operation: '' },\n    { property: <Text b>bold</Text>, description: 'Bold style', operation: '' },\n  ]\n  const [data, setData] = React.useState(dataSource)\n  const renderAction = (value, rowData, index) => {\n    const removeHandler = () => {\n      setData(last => last.filter((_, dataIndex) => dataIndex !== index))\n    }\n    return (\n      <Button type=\"error\" auto scale={1/3} font=\"12px\" onClick={removeHandler}>Remove</Button>\n    )\n  }\n  return (\n  <Table data={data} onChange={value => setData(value)}>\n    <Table.Column prop=\"property\" label=\"property\" />\n    <Table.Column prop=\"description\" label=\"description\" />\n    <Table.Column prop=\"operation\" label=\"operation\" width={150} render={renderAction} />\n  </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"update row\"\n  desc=\"You can use custom elements to update a specific row.\"\n  scope={{ Table, Text, Button }}\n  code={`\n() => {\n  const dataSource = [\n    { property: 'type', description: 'Content type', operation: '' },\n    { property: 'Component', description: 'DOM element to use', operation: '' },\n    { property: <Text b>bold</Text>, description: 'Bold style', operation: '' },\n  ]\n  const [data, setData] = React.useState(dataSource)\n  const renderAction = (value, rowData, rowIndex) => {\n    const updateHandler = () => {\n      setData(last => {\n        return last.map((item, dataIndex) => {\n          if (dataIndex !== rowIndex) return item\n          return {\n            ...item,\n            property: Math.random().toString(16).slice(-5)\n          }\n        })\n      })\n    }\n    return (\n      <Button type=\"secondary\" auto scale={1/3} font=\"12px\" onClick={updateHandler}>Update</Button>\n    )\n  }\n  return (\n    <Table data={data} onChange={value => setData(value)}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"operation\" label=\"operation\" width={150} render={renderAction} />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"custom head\"\n  scope={{ Table, Code, Text }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },\n    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\">\n        <Code>type</Code>\n      </Table.Column>\n      <Table.Column prop=\"default\">\n        <Text b>default</Text>\n      </Table.Column>\n    </Table>\n  )\n}\n`}\n/>\n\n<PlaygroundTitle\n  title=\"TypeScript Example\"\n  desc=\"Get a better experience in TS by specifying a generic type.\"\n/>\n\n```tsx\ntype User = {\n  name: string\n  role: string\n  records: Array<{ date: string }>\n}\nconst renderHandler: TableColumnRender<User> = (value, rowData, index) => {\n  return <div>{rowData.date}</div>\n}\nconst data: Array<User> = [\n  { name: 'witt', role: 'admin', records: [{ date: '2021-05-01' }] },\n]\n\nconst MyComponent = () => (\n  <Table<User> data={data}>\n    <Table.Column<User> prop=\"name\" label=\"username\" />\n    <Table.Column<User> prop=\"role\" label=\"role\" />\n    <Table.Column<User> prop=\"records\" label=\"records\" render={renderHandler} />\n  </Table>\n)\n```\n\n<Attributes edit=\"/pages/en-us/components/table.mdx\">\n<Attributes.Title>Table.Props</Attributes.Title>\n\n| Attribute        | Description                                  | Type                                                  | Accepted values    | Default |\n| ---------------- | -------------------------------------------- | ----------------------------------------------------- | ------------------ | ------- |\n| **data**         | data source                                  | `Array<T>`                                            | -                  | -       |\n| **initialData**  | initial data                                 | `Array<T>`                                            | -                  | `[]`    |\n| **emptyText**    | displayed text when table's content is empty | `string`                                              | -                  | -       |\n| **hover**        | table's hover effect                         | `boolean`                                             | -                  | `true`  |\n| **onRow**        | callback row's content by click              | [TableOnRowClick](#tableonrowclick)                   | -                  | -       |\n| **onCell**       | callback cell's content by click             | [TableOnCellClick](#tableoncellclick)                 | -                  | -       |\n| **onChange**     | data change event                            | `(data: T) => void`                                   | -                  | -       |\n| **rowClassName** | set className to each row                    | [TableRowClassNameHandler](#tablerowclassnamehandler) | -                  | -       |\n| ...              | native props                                 | `TableHTMLAttributes`                                 | `'id', 'name' ...` | -       |\n\n<Attributes.Title>Table.Column.Props</Attributes.Title>\n\n| Attribute          | Description                            | Type                                    | Accepted values | Default |\n| ------------------ | -------------------------------------- | --------------------------------------- | --------------- | ------- |\n| **prop**(required) | table-column's prop                    | `string`                                | -               | -       |\n| **label**          | table-column's label                   | `string`                                | -               | -       |\n| **width**          | width number (px)                      | `number`                                | -               | -       |\n| **className**      | set className to each column           | `string`                                | -               | -       |\n| **render**         | render returns elements in all columns | [TableColumnRender](#tablecolumnrender) | -               | -       |\n\n<Attributes.Title>TableOnRowClick</Attributes.Title>\n\n```ts\ntype TableOnRowClick<T> = (rowData: T, rowIndex: number) => void\n```\n\n<Attributes.Title>TableOnCellClick</Attributes.Title>\n\n```ts\ntype TableOnCellClick<T> = (\n  value: T[keyof T],\n  rowIndex: number,\n  columnIndex: number,\n) => void\n```\n\n<Attributes.Title>TableRowClassNameHandler</Attributes.Title>\n\n```ts\ntype TableRowClassNameHandler<T> = (rowData: T, rowIndex: number) => string\n```\n\n<Attributes.Title>TableColumnRender</Attributes.Title>\n\n```ts\ntype TableColumnRender<T extends Record> = (\n  value: T[keyof T],\n  rowData: T,\n  rowIndex: number,\n) => JSX.Element | void\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/tabs.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tabs, Spacer, Text, Button, Code, useTabs } from 'components'\nimport { useState } from 'react'\nimport TwitterIcon from '@geist-ui/icons/twitter'\nimport TwitchIcon from '@geist-ui/icons/twitch'\n\nexport const meta = {\n  title: 'Tabs',\n  group: 'Navigation',\n}\n\n## Tabs\n\nDisplay tab content.\n\nThe Tabs contain an additional Hooks, see subsection [useTabs](/en-us/hooks/use-tabs) for details.\n\n<Playground\n  scope={{ Tabs }}\n  desc=\"Toggle display of different templates.\"\n  code={`\n<Tabs initialValue=\"1\">\n  <Tabs.Item label=\"http\" value=\"1\">HTTP is stateless, but not sessionless.</Tabs.Item>\n  <Tabs.Item label=\"proxies\" value=\"2\">Between the Web browser and the server, numerous computers and machines relay the HTTP messages.</Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"Disabled\"\n  scope={{ Tabs }}\n  code={`\n<Tabs initialValue=\"1\">\n  <Tabs.Item label=\"http\" value=\"1\">HTTP is stateless, but not sessionless.</Tabs.Item>\n  <Tabs.Item label=\"jumped\" value=\"2\" disabled />\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"Hide Divider\"\n  scope={{ Tabs, Text }}\n  code={`\n<Tabs initialValue=\"html\" hideDivider>\n  <Tabs.Item label=\"HTML\" value=\"html\">\n    <Text mt={0}>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"CSS\" value=\"css\">\n    <Text mt={0}>CSS is the language that we can use to style and lay out our web content,\n    as well as adding behavior like animation.</Text>\n  </Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"Hide Border\"\n  scope={{ Tabs, Text }}\n  code={`\n<Tabs initialValue=\"html\" hideDivider hideBorder leftSpace={0}>\n  <Tabs.Item label=\"HTML\" value=\"html\">\n    <Text mt={0}>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"CSS\" value=\"css\">\n    <Text mt={0}>CSS is the language that we can use to style and lay out our web content,\n    as well as adding behavior like animation.</Text>\n  </Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"With Icon\"\n  desc=\"Show icon component on label button.\"\n  scope={{ Tabs, TwitchIcon, TwitterIcon, Text }}\n  code={`\n<Tabs initialValue=\"1\" align=\"center\" leftSpace={0}>\n <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value=\"1\">\n    <Text mt={0}>Hello, this is our live broadcast on Twitch.</Text>\n  </Tabs.Item>\n  <Tabs.Item label={<><TwitterIcon/> Twitter </>} value=\"2\">\n    <Text mt={0}>The Components of React looks very cool.</Text>\n  </Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"Scroll Behavior\"\n  desc=\"If all tabs cannot fit in the width then then hidden tabs can be accessed through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)\"\n  scope={{ Tabs, TwitchIcon, TwitterIcon, Text }}\n  code={`\n<Tabs initialValue=\"1\">\n  <Tabs.Item label=\"Home\" value=\"1\">\n    <Text>Hello!</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"About\" value=\"2\">\n    <Text>Cool stuff.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"About Us\" value=\"3\">\n    <Text>Good people.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"Features\" value=\"4\">\n    <Text>Amazing.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"Pricing\" value=\"5\">\n    <Text>Very low.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"Docs\" value=\"6\">\n    <Text>Clear.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"Profile\" value=\"7\">\n    <Text>Extraordinary person.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"Settings\" value=\"8\">\n    <Text>Easy to tweak.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"Dashboard\" value=\"9\">\n    <Text>Charts.</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"Policies\" value=\"10\">\n    <Text>Privacy focused.</Text>\n  </Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"Imperatively\"\n  desc=\"Control components with imperatively style.\"\n  scope={{ Tabs, Button, Spacer, Code, Text, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState('1')\n  const switchHandler = () => setValue('2')\n  const changeHandler = val => setValue(val)\n  return (\n    <>\n      <Button scale={1/3} font=\"12px\" onClick={switchHandler}><Text>Select <Code>Extensible</Code></Text></Button>\n      <Spacer h={.5} />\n      <Tabs value={value} onChange={changeHandler}>\n        <Tabs.Item label=\"stateless\" value=\"1\">HTTP is stateless, but not sessionless.</Tabs.Item>\n        <Tabs.Item label=\"extensible\" value=\"2\">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>\n      </Tabs>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/tabs.mdx\">\n<Attributes.Title>Tabs.Props</Attributes.Title>\n\n| Attribute            | Description                             | Type                    | Accepted values                 | Default |\n| -------------------- | --------------------------------------- | ----------------------- | ------------------------------- | ------- |\n| **initialValue**     | initial value                           | `string`                | -                               | -       |\n| **value**            | current selected value                  | `string`                | -                               | -       |\n| **hideDivider**      | hide default divider                    | `boolean`               | -                               | `false` |\n| **hideBorder**       | hide border on active                   | `boolean`               | -                               | `false` |\n| **leftSpace**        | space area on the left side             | `CSSProperties`         | -                               | `12px`  |\n| **onChange**         | change event                            | `(val: string) => void` | -                               | -       |\n| **align**            | horizontal alignment of each child item | `justifyContent`        | -                               | `left`  |\n| **activeClassName**  | className of active child item          | `string`                | -                               | -       |\n| **activeStyles**     | style of active child item              | `object`                | -                               | -       |\n| **hoverHeightRatio** | height percentage of highlight block    | `number`                | -                               | 0.7     |\n| **hoverWidthRatio**  | width percentage of highlight block     | `number`                | -                               | 1.15    |\n| ...                  | native props                            | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |\n\n<Attributes.Title alias=\"Tabs.Tab\">Tabs.Item.Props</Attributes.Title>\n\n| Attribute           | Description         | Type      | Accepted values | Default |\n| ------------------- | ------------------- | --------- | --------------- | ------- |\n| **label**(required) | display tab's label | `string`  | -               | -       |\n| **value**(required) | unique ident value  | `string`  | -               | -       |\n| **disabled**        | disable current tab | `boolean` | -               | `false` |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/tag.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tag, Spacer } from 'components'\n\nexport const meta = {\n  title: 'Tag',\n  group: 'Data Display',\n}\n\n## Tag\n\nDisplay a unique keyword, optionally as a part of a set.\n\n<Playground\n  scope={{ Tag }}\n  code={`\n<div>\n  <Tag>Status: Unstable</Tag>\n</div>\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  desc=\"Show different states with colors.\"\n  scope={{ Tag, Spacer }}\n  code={`\n<>\n  <Tag type=\"success\">Success</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"warning\">Warning</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"error\">Error</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"secondary\">Secondary</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"lite\">Lite</Tag>\n</>\n`}\n/>\n\n<Playground\n  title=\"Invert\"\n  desc=\"Invert color and background.\"\n  scope={{ Tag, Spacer }}\n  code={`\n<>\n  <Tag type=\"default\" invert>Default</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"success\" invert>Success</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"warning\" invert>Warning</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"error\" invert>Error</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"secondary\" invert>Secondary</Tag>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/tag.mdx\">\n<Attributes.Title>Tag.Props</Attributes.Title>\n\n| Attribute  | Description                 | Type                  | Accepted values          | Default   |\n| ---------- | --------------------------- | --------------------- | ------------------------ | --------- |\n| **type**   | tag type                    | [TagTypes](#tagtypes) | -                        | `default` |\n| **invert** | invert color and background | `boolean`             | -                        | `false`   |\n| ...        | native props                | `HTMLAttributes`      | `'id', 'className', ...` | -         |\n\n<Attributes.Title>TagTypes</Attributes.Title>\n\n```ts\ntype TagTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/text.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Text } from 'components'\n\nexport const meta = {\n  title: 'Text',\n  group: 'General',\n  index: 10,\n}\n\n## Text\n\nDisplay text using well-defined typographic styles.\n\n<Playground\n  title=\"Headings\"\n  desc=\"Use `Text` to standardize text content.\"\n  scope={{ Text }}\n  code={`\n<Text h1>Start our Geist journey.</Text>\n`}\n/>\n\n<Playground\n  title=\"Paragraph\"\n  desc=\"Add `p` and `b` attributes to a `Text`.\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text p>\n   Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.\n  </Text>\n  <Text p b>\n   A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"Small\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text small>\n   HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.\n  </Text>\n  <Text small i>\n   HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"Blockquote\"\n  scope={{ Text }}\n  code={`\n<Text blockquote my={0}>\n  Send cookies from the server to the user-agent.\n</Text>\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  scope={{ Text }}\n  code={`\n<Text b i style={{ letterSpacing: '0.6px' }}>\n  <Text span type=\"success\">G</Text>\n  <Text span type=\"warning\">e</Text>\n  <Text span type=\"secondary\">i</Text>\n  <Text span type=\"error\">s</Text>\n  <Text span style={{ color: '#ccc' }}>t</Text>\n  <Text span type=\"success\" ml=\"5px\">UI</Text>\n</Text>\n`}\n/>\n\n<Playground\n  title=\"Sizes\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text font=\"12px\" mt={0}>Font Size: 12px;</Text>\n  <Text font=\"14px\">Font Size: 14px;</Text>\n  <Text font=\"1rem\">Font Size: 1rem;</Text>\n  <Text scale={1.25} mb={0}>Font Size Scale: 1.25;</Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"Compose\"\n  desc=\"Effect of multiple `Text` stacks\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text p mt={0}>\n   Specifies origins that are allowed to see values of attributes retrieved via features of the Resource Timing API, which would otherwise be reported as zero due to cross-origin restrictions.\n  </Text>\n\n  <Text mb={0}>\n    <Text small del>Indicates if the resource transmitted should be displayed inline (default behavior without the header),</Text>\n    <Text small b>or if it should be handled like a download and the browser should present a “Save As” dialog.</Text>\n  </Text>\n</>\n`} />\n\n<Attributes edit=\"/pages/en-us/components/text.mdx\">\n<Attributes.Title>Text.Props</Attributes.Title>\n\n| Attribute      | Description    | Type             | Accepted values          | Default   |\n| -------------- | -------------- | ---------------- | ------------------------ | --------- |\n| **p**          | component name | `boolean`        | -                        | `true`    |\n| **h1 - h6**    | component name | `boolean`        | -                        | `false`   |\n| **small**      | component name | `boolean`        | -                        | `false`   |\n| **span**       | component name | `boolean`        | -                        | `false`   |\n| **del**        | component name | `boolean`        | -                        | `false`   |\n| **i**          | component name | `boolean`        | -                        | `false`   |\n| **em**         | component name | `boolean`        | -                        | `false`   |\n| **b**          | component name | `boolean`        | -                        | `false`   |\n| **blockquote** | component name | `boolean`        | -                        | `false`   |\n| **type**       | text type      | `TextTypes`      | [TextTypes](#texttypes)  | `default` |\n| ...            | native props   | `HTMLAttributes` | `'id', 'className', ...` | -         |\n\n<Attributes.Title>TextTypes</Attributes.Title>\n\n```ts\ntype TextTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/textarea.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Textarea, Spacer, useInput, Button, Code } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: 'Textarea',\n  group: 'Data Entry',\n}\n\n## Textarea\n\nRetrieve multi-line user input.\n\n<Playground\n  desc=\"Basic usage.\"\n  scope={{ Textarea }}\n  code={`\n<Textarea placeholder=\"Please enter a description.\" />\n`}\n/>\n\n<Playground\n  title=\"disabled\"\n  desc=\"Disable interactive textarea.\"\n  scope={{ Textarea }}\n  code={`\n<Textarea width=\"100%\" disabled placeholder=\"Now is the optimal workflow for frontend teams. All-in-one: Static and JAMstack deployment, Serverless Functions, and Global CDN.\" />\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Differentiate states by color.\"\n  scope={{ Textarea, Spacer }}\n  code={`\n<>\n  <Textarea type=\"success\" height=\"65px\" value=\"Success\" />\n  <Spacer w={.5} inline />\n  <Textarea type=\"secondary\" height=\"65px\" value=\"Secondary\" />\n  <Spacer h={.5} />\n  <Textarea type=\"warning\" height=\"65px\" value=\"Warning\" />\n  <Spacer w={.5} inline />\n  <Textarea type=\"error\" height=\"65px\" value=\"Error\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"get change\"\n  desc=\"Capture changes in textarea.\"\n  scope={{ Textarea, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState()\n  const handler = (e) => {\n    setValue(e.target.value)\n    console.log(e.target.value)\n  }\n  return (\n    <Textarea width=\"100%\"\n     value={value}\n     onChange={handler}\n     placeholder=\"Now is the optimal workflow for frontend teams. All-in-one: Static and JAMstack deployment, Serverless Functions, and Global CDN.\" />\n  )\n}\n`}\n/>\n\n<Playground\n  title={\n    <>\n      With <Code>useInput</Code>\n    </>\n  }\n  desc=\"Use `hooks` to capture changes.\"\n  scope={{ Textarea, useInput, Button, Spacer }}\n  code={`\n() => {\n  const { setState, reset, bindings } = useInput('Now is the optimal workflow for frontend teams. All-in-one: Static and JAMstack deployment, Serverless Functions, and Global CDN.')\n  return (\n    <>\n      <Textarea width=\"100%\" {...bindings}/>\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/3} onClick={() => setState(Math.random().toString(32))}>set value</Button>\n      <Spacer h={.5} />\n      <Button auto scale={1/3} onClick={() => reset()}>reset value</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Imperative API\"\n  desc=\"Update component in an uncontrolled way.\"\n  scope={{ Textarea, Spacer, Button }}\n  code={`\n() => {\n  const ref = React.useRef(null)\n  const setChange = () => {\n    ref && (ref.current.value = Math.random().toString(32))\n  }\n  return (\n    <>\n      <Textarea initialValue=\"Hello\" onChange={e => console.log(e.target.value)} ref={ref} />\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/3} onClick={setChange}>set value</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/textarea.mdx\">\n<Attributes.Title alias=\"Input.Textarea\">Textarea.Props</Attributes.Title>\n\n| Attribute        | Description    | Type                             | Accepted values                  | Default   |\n| ---------------- | -------------- | -------------------------------- | -------------------------------- | --------- |\n| **value**        | textarea value | `string`                         | -                                | -         |\n| **initialValue** | textarea value | `string`                         | -                                | -         |\n| **placeholder**  | placeholder    | `string`                         | -                                | -         |\n| **type**         | current type   | `TextareaTypes`                  | [TextareaTypes](#textareatypes)  | `default` |\n| **readOnly**     | native attr    | `boolean`                        | -                                | `false`   |\n| **disabled**     | disable input  | `boolean`                        | -                                | `false`   |\n| **onChange**     | change event   | `(e: React.ChangeEvent) => void` | -                                | -         |\n| **resize**       | CSS attribute  | `CSSResize`                      | [CSSResize](#cssresize)          | `none`    |\n| ...              | native props   | `TextareaHTMLAttributes`         | `'form', 'id', 'className', ...` | -         |\n\n<Attributes.Title>useInput</Attributes.Title>\n\n```ts\ntype useInput = (initialValue: string) => {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  reset: () => void\n  bindings: {\n    value: string\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  }\n}\n```\n\n<Attributes.Title>TextareaTypes</Attributes.Title>\n\n```ts\ntype TextareaTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>CSSResize</Attributes.Title>\n\n```ts\ntype CSSResize = 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/toast.mdx",
    "content": "import { Layout, Attributes } from 'lib/components'\n\nexport const meta = {\n  title: 'Toast',\n  group: 'Feedback',\n}\n\n## Toast\n\nThe Toast component only supports Hooks calls, please see the [useToast](/en-us/hooks/use-toast 'Toast Hooks') documentation for details.\n\n<Attributes edit=\"/pages/en-us/components/toast.mdx\" />\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/toggle.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Toggle, Spacer } from 'components'\n\nexport const meta = {\n  title: 'Toggle',\n  group: 'Data Entry',\n}\n\n## Toggle\n\nDisplays a boolean value.\n\n<Playground\n  scope={{ Toggle, Spacer }}\n  code={`\n<>\n  <Toggle />\n  <Spacer h={.5} />\n  <Toggle initialChecked />\n</>\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  desc=\"Differentiate states by color.\"\n  scope={{ Toggle, Spacer }}\n  code={`\n<>\n  <Toggle type=\"default\" initialChecked />\n  <Spacer h={.5} />\n  <Toggle type=\"secondary\" initialChecked />\n  <Spacer h={.5} />\n  <Toggle type=\"success\" initialChecked />\n  <Spacer h={.5} />\n  <Toggle type=\"warning\" initialChecked />\n  <Spacer h={.5} />\n  <Toggle type=\"error\" initialChecked />\n</>\n`}\n/>\n\n<Playground\n  title=\"disabled\"\n  scope={{ Toggle, Spacer }}\n  code={`\n<>\n  <Toggle disabled />\n  <Spacer h={.5} />\n  <Toggle initialChecked disabled />\n</>\n`}\n/>\n\n<Playground\n  title=\"get change\"\n  scope={{ Toggle, Spacer }}\n  code={`\n() => {\n  const handler = event => {\n    console.log(event.target.checked)\n  }\n  return <Toggle onChange={handler} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/toggle.mdx\">\n<Attributes.Title>Toggle.Props</Attributes.Title>\n\n| Attribute          | Description               | Type                  | Accepted values                    | Default   |\n| ------------------ | ------------------------- | --------------------- | ---------------------------------- | --------- |\n| **checked**        | checked or not            | `boolean`             | -                                  | -         |\n| **initialChecked** | checked or not on initial | `boolean`             | -                                  | `false`   |\n| **onChange**       | change event handler      | `ToggleEvent`         | -                                  | -         |\n| **type**           | current type              | `ToggleTypes`         | [ToggleTypes](#toggletypes)        | `default` |\n| **disabled**       | disable toggle            | `boolean`             | -                                  | `false`   |\n| ...                | native props              | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | -         |\n\n<Attributes.Title>ToggleEvent</Attributes.Title>\n\n```ts\ninterface ToggleEventTarget {\n  checked: boolean\n}\n\nexport interface ToggleEvent {\n  target: ToggleEventTarget\n  stopPropagation: () => void\n  preventDefault: () => void\n  nativeEvent: React.ChangeEvent\n}\n```\n\n<Attributes.Title>ToggleTypes</Attributes.Title>\n\n```ts\ntype ToggleTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/tooltip.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tooltip, Spacer, Button, Link, Badge, Code, Text, Grid } from 'components'\n\nexport const meta = {\n  title: 'Tooltip',\n  group: 'Data Display',\n}\n\n## Tooltip\n\nDisplays additional information on hover.\n\n<Playground\n  desc=\"Basic usage.\"\n  scope={{ Tooltip }}\n  code={`\n<Tooltip text={'Push to Git and your website is live.'}>Tooltip</Tooltip>\n`}\n/>\n\n<Playground\n  title=\"Trigger\"\n  desc=\"Trigger by click.\"\n  scope={{ Tooltip }}\n  code={`\n<Tooltip text={'Push to Git and your website is live.'} trigger=\"click\" type=\"dark\">\n  <span>Click me</span>\n</Tooltip>\n`}\n/>\n\n<Playground\n  title=\"With Components\"\n  desc=\"Combined with different components.\"\n  scope={{ Tooltip, Button, Link, Spacer, Badge }}\n  code={`\n<div>\n  <Tooltip text={'Push to Git and your website is live.'} type=\"dark\">\n    <Button auto scale={1/2}>Button</Button>\n  </Tooltip>\n  <Spacer inline w={1} />\n  <Tooltip text={'Push to Git and your website is live.'} type=\"dark\">\n    <Badge>1000+</Badge>\n  </Tooltip>\n  <Spacer inline w={1} />\n  <Tooltip text={'Push to Git and your website is live.'} type=\"dark\">\n    <Link href=\"#\" color>Hyperlink</Link>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"Custom Content\"\n  desc=\"You can customize the pop-up content.\"\n  scope={{ Tooltip, Spacer, Code, Text }}\n  code={`\n<div>\n  <Tooltip text={<>Perfect for working with a <Code>CMS</Code>.</>}>\n    <span>Top</span>\n  </Tooltip>\n  <Spacer inline w={2.5} />\n  <Tooltip text={<><Text b>Perfect</Text> for working with a CMS.</>} placement=\"bottom\">\n    <span>Bottom</span>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"Types\"\n  desc=\"Different state.\"\n  scope={{ Tooltip, Spacer, Code, Text }}\n  code={`\n<div>\n  <Tooltip text=\"Perfect for working with a CMS.\" type=\"dark\">\n    <span>Dark</span>\n  </Tooltip>\n  <Spacer inline w={1.5} />\n  <Tooltip text=\"Perfect for working with a CMS.\" type=\"success\">\n    <span>Success</span>\n  </Tooltip>\n  <Spacer inline w={1.5} />\n  <Tooltip text=\"Perfect for working with a CMS.\" type=\"warning\">\n    <span>Warning</span>\n  </Tooltip>\n  <Spacer inline w={1.5} />\n  <Tooltip text=\"Perfect for working with a CMS.\" type=\"error\">\n    <span>Error</span>\n  </Tooltip>\n  <Spacer inline w={1.5} />\n  <Tooltip text=\"Perfect for working with a CMS.\" type=\"secondary\">\n    <span>Secondary</span>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"Variant\"\n  desc=\"Special styles.\"\n  scope={{ Tooltip, Spacer, Code, Text }}\n  code={`\n<div>\n  <Tooltip text=\"Push to Git and your website is live.\" type=\"lite\">\n    <span>Lite</span>\n  </Tooltip>\n  <Spacer inline w={2.5} />\n  <Tooltip text=\"Push to Git and your website is live.\" hideArrow>\n    <span>No Arrow</span>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"Placements\"\n  desc=\"There are 12 `placement` options available.\"\n  scope={{ Tooltip, Spacer, Grid }}\n  code={`\n() => {\n  const text = 'HTTP is stateless, but not sessionless'\n  return (\n    <Grid.Container gap={1.5} justify=\"center\" alignItems=\"center\">\n      <Grid xs={8} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"topStart\" type=\"dark\">topStart</Tooltip>\n      </Grid>\n      <Grid xs={8} justify=\"center\">\n        <Tooltip text={text} placement=\"top\" type=\"dark\">top</Tooltip>\n      </Grid>\n      <Grid xs={8}>\n        <Tooltip text={text} placement=\"topEnd\" type=\"dark\">topEnd</Tooltip>\n      </Grid>\n      <Grid xs={6} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"leftStart\" type=\"dark\">leftStart</Tooltip>\n      </Grid>\n      <Grid xs={12} />\n      <Grid xs={6}>\n        <Tooltip text={text} placement=\"rightStart\" type=\"dark\">rightStart</Tooltip>\n      </Grid>\n      <Grid xs={6} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"left\" type=\"dark\">left</Tooltip>\n      </Grid>\n      <Grid xs={12} />\n      <Grid xs={6}>\n        <Tooltip text={text} placement=\"right\" type=\"dark\">right</Tooltip>\n      </Grid>\n      <Grid xs={6} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"leftEnd\" type=\"dark\">leftEnd</Tooltip>\n      </Grid>\n      <Grid xs={12} />\n      <Grid xs={6}>\n        <Tooltip text={text} placement=\"rightEnd\" type=\"dark\">rightEnd</Tooltip>\n      </Grid>\n      <Grid xs={8} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"bottomStart\" type=\"dark\">bottomStart</Tooltip>\n      </Grid>\n      <Grid xs={8} justify=\"center\">\n        <Tooltip text={text} placement=\"bottom\" type=\"dark\">bottom</Tooltip>\n      </Grid>\n      <Grid xs={8}>\n        <Tooltip text={text} placement=\"bottomEnd\" type=\"dark\">bottomEnd</Tooltip>\n      </Grid>\n    </Grid.Container>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/tooltip.mdx\">\n<Attributes.Title>Tooltip.Props</Attributes.Title>\n\n| Attribute           | Description                                                | Type                          | Accepted values | Default   |\n| ------------------- | ---------------------------------------------------------- | ----------------------------- | --------------- | --------- |\n| **text**            | text of pop-up                                             | `string` `React.ReactNode`    | -               | -         |\n| **visible**         | visible or not                                             | `boolean`                     | -               | `false`   |\n| **initialVisible**  | visible on initial                                         | `boolean`                     | -               | `false`   |\n| **hideArrow**       | hide arrow icon                                            | `boolean`                     | -               | `false`   |\n| **type**            | preset style type                                          | [TooltipTypes](#tooltiptypes) | -               | `default` |\n| **placement**       | position of the tooltip relative to the target             | [Placement](#placement)       | -               | `top`     |\n| **trigger**         | tooltip trigger mode                                       | `'click' / 'hover'`           | -               | `hover`   |\n| **enterDelay**(ms)  | delay before tooltip is shown                              | `number`                      | -               | `100`     |\n| **leaveDelay**(ms)  | delay before tooltip is hidden (only work in 'hover' mode) | `number`                      | -               | `150`     |\n| **offset**(px)      | distance between pop-up and target                         | `number`                      | -               | `12`      |\n| **portalClassName** | className of pop-up box                                    | `string`                      | -               | -         |\n| **onVisibleChange** | call when visibility of the tooltip is changed             | `(visible: boolean) => void`  | -               | -         |\n| ...                 | native props                                               | `HTMLAttributes`              | `'id' ...`      | -         |\n\n<Attributes.Title>TooltipTypes</Attributes.Title>\n\n```ts\ntype TooltipTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n<Attributes.Title>Placement</Attributes.Title>\n\n```ts\ntype Placement = 'top'\n  | 'topStart',\n  | 'topEnd',\n  | 'left',\n  | 'leftStart',\n  | 'leftEnd',\n  | 'bottom',\n  | 'bottomStart',\n  | 'bottomEnd',\n  | 'right',\n  | 'rightStart',\n  | 'rightEnd',\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/components/user.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { User, Spacer } from 'components'\n\nexport const meta = {\n  title: 'User',\n  group: 'Data Display',\n}\n\n## User\n\nDisplay user profile or social information.\n\n<Playground\n  desc=\"Show username.\"\n  scope={{ User, Spacer }}\n  code={`\n<User src=\"/images/avatar.png\" name=\"Witt\" />\n`}\n/>\n\n<Playground\n  title=\"Description\"\n  desc=\"Show an extra description.\"\n  scope={{ User, Spacer }}\n  code={`\n<User src=\"https://unix.bio/assets/avatar.png\" name=\"Witt\">\n  JavaScript engineer\n</User>\n`}\n/>\n\n<Playground\n  title=\"Social\"\n  desc=\"Show link below user name.\"\n  scope={{ User, Spacer }}\n  code={`\n<User src=\"https://unix.bio/assets/avatar.png\" name=\"Witt\">\n  <User.Link href=\"https://twitter.com/echo_witt\">@echo_witt</User.Link>\n</User>\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/components/user.mdx\">\n<Attributes.Title>User.Props</Attributes.Title>\n\n| Attribute          | Description                              | Type                   | Accepted values                  | Default |\n| ------------------ | ---------------------------------------- | ---------------------- | -------------------------------- | ------- |\n| **name**(required) | user name                                | `ReactNode` / `string` | -                                | -       |\n| **src**            | avatar url                               | `string`               | -                                | -       |\n| **text**           | display text when image is missing       | `string`               | -                                | -       |\n| **altText**        | alt attribute used by inner avatar image | `string`               | -                                | -       |\n| ...                | native props                             | `HTMLAttributes`       | `'id', 'name', 'className', ...` | -       |\n\n<Attributes.Title>User.Link.Props</Attributes.Title>\n\n| Attribute | Description  | Type                   | Accepted values                  | Default |\n| --------- | ------------ | ---------------------- | -------------------------------- | ------- |\n| **href**  | link address | `string`               | -                                | -       |\n| ...       | native props | `AnchorHTMLAttributes` | `'id', 'name', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/guide/bundle-size.mdx",
    "content": "import Layout from 'lib/components/layout'\n\nexport const meta = {\n  title: 'Bundle Size',\n  group: 'Getting Started',\n  index: 11,\n}\n\n## Bundle Size\n\nThe size of Geist at the completion of full packing is about [111kb](https://bundle.js.org/?q=@geist-ui/react) (Gzipped),\nThis is a good score when comparing the size of modern client applications and will not impact the performance of your application.\nAs a matter of engineering practice, it is recommended that you always split Geist as a separate chunk within your application to get fixed caching.\n\nFor higher first screen load speed, try using [Server Side Rendering](/en-us/guide/server-render) or perform volume optimization as described below.\n\n### Auto Tree-shaking\n\nFor projects using `webpack 5.0` or higher, there is no need to add any configuration to get full tree-shaking.\nAs long as you use the ES module to import Geist, you can automatically remove unnecessary components during bundle.\n\nGenerally this means that the scaffolding you are using needs to be larger than the following versions\n\n- Webpack: `>= 5.0`\n- Next.js: `>= 11.0`\n- React scripts (CRA): `>= 5.0`\n\n#### Recommended Examples\n\n- [CRA with TreeShaking](https://github.com/geist-org/geist-ui/blob/master/examples/tree-shaking-create-react-app/README.md)\n- [Next.js with TreeShaking](https://github.com/geist-org/geist-ui/blob/master/examples/tree-shaking-nextjs/README.md)\n- [Webpack with TreeShaking](https://github.com/geist-org/geist-ui/blob/master/examples/tree-shaking-webpack/README.md)\n\n### Import single component manually\n\nFor projects with package size requirements, you can choose to import single component manually.\n\nManually import single components does not guarantee 100% that only a single component will be packaged,\nas some components will depend on each other, for example, if only a single `Snippet` component is used in a project, the bundle package\nwill also contain the `Toast` component. However, this type of optimization can still reduce the size of your application significantly,\nprovided you only use a small amount components.\n\n```jsx\nimport Button from '@geist-ui/core/esm/button'\n\nconst MyComponent = () => <Button>Submit</Button>\n```\n\n### With Babel\n\nIf your project does not support ES Module at the moment, you can use the Babel plugin to reduce the build size.\n\nGeist follows the Tree Shaking naming scheme (from community convention), this will be helpful for some legacy projects.\nThis allows you to import in the full amount of components, but automatically exclude the parts that are not really used when packaging.\nThis feature is usually used in conjunction with the [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import) tool.\n\nA classic use case is to add the following config to the `.babelrc`:\n\n```json\n// NAME:.babelrc\n{\n  \"plugins\": [\n    [\n      \"import\",\n      {\n        \"libraryName\": \"@geist-ui/core\",\n        \"libraryDirectory\": \"esm\"\n      }\n    ]\n  ]\n}\n```\n\n#### Legacy Examples\n\n- [CRA with Babel](https://github.com/geist-org/geist-ui/blob/v2.3.3/examples/tree-shaking-create-react-app/README.md)\n- [Next.js with Babel](https://github.com/geist-org/geist-ui/blob/v2.3.3/examples/tree-shaking-nextjs/README.md)\n- [Webpack with Babel](https://github.com/geist-org/geist-ui/blob/v2.3.3/examples/tree-shaking-webpack/README.md)\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/guide/colors.mdx",
    "content": "import { Code, Display } from 'components'\nimport { Layout, Colors } from 'lib/components'\n\nexport const meta = {\n  title: 'Colors',\n  group: 'Customization',\n  index: 20,\n}\n\n## Colors\n\nDefault colors for themes.\n\n### PRIMARY\n\nYou can use any color anywhere, all colors change with the theme.\nIf you want to customize your colors, please read [use-theme](/en-us/hooks/use-theme) to learn more.\n\n<Display width=\"90%\" caption={<span>Get palette from <Code>useTheme</Code>.</span>}>\n\n```jsx\nimport { useTheme } from '@geist-ui/core'\n\nconst myComponent = () => {\n  const { palette } = useTheme()\n\n  return <p style={{ color: palette.accents_1 }}>myComponent</p>\n}\n```\n\n</Display>\n<Colors type=\"normal\" />\n\n### STATUS\n\nUse different colors to express more emotional changes.\n\n### Success\n\n<Colors type=\"success\" />\n\n### Error\n\n<Colors type=\"error\" />\n\n### Warning\n\n<Colors type=\"warning\" />\n\n### Cyan\n\n<Colors type=\"cyan\" />\n\n### Violet\n\n<Colors type=\"violet\" />\n\n### Highlight\n\n<Colors type=\"highlight\" />\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/guide/index.js",
    "content": "import redirect from 'lib/redirect'\n\nexport default redirect('/en-us/guide/introduction')\n"
  },
  {
    "path": "pages/en-us/guide/installation.mdx",
    "content": "import Layout from 'lib/components/layout'\nimport { Code, Spacer, Tabs, Dot, Snippet, Text } from 'components'\n\nexport const meta = {\n  title: 'Installation',\n  group: 'Getting Started',\n  index: 10,\n}\n\n## Installation\n\n### Setup\n\nEnsure your have the latest [NodeJS](https://nodejs.org/en/download/),\nand a package manager: [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/).\n\nAlso, Geist is based on the component library of framework React, which means you must also understand the basics of how to [create projects](https://reactjs.org/docs/hello-world.html) with the framework\n\n<h4>\n  <Dot type=\"success\">Install</Dot>\n</h4>\n\n<Tabs initialValue=\"yarn\" hideDivider hideBorder align=\"flex-end\" mt=\"-46px\">\n  <Tabs.Item label=\"Yarn\" value=\"yarn\">\n    <Snippet>yarn add @geist-ui/core</Snippet>\n  </Tabs.Item>\n  <Tabs.Item label=\"Npm\" value=\"npm\">\n    <Snippet>npm i @geist-ui/core</Snippet>\n  </Tabs.Item>\n</Tabs>\n<Spacer h={0.5} />\n<h4>\n  <Dot type=\"success\">Import</Dot>\n</h4>\n\n```jsx\n// NAME: /src/app.js\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\n\nexport default () => (\n  <GeistProvider>\n    <CssBaseline /> // --> base styles\n    <AppComponent /> // --> your application\n  </GeistProvider>\n)\n```\n\n<Spacer h={0} mb=\"8px\" />\n<h4>\n  <Dot type=\"success\">Usage</Dot>\n</h4>\n\n```jsx\nimport { Button, Page, Text } from '@geist-ui/core'\n\nconst Home = () => (\n  <Page>\n    <Text h1>Home Page</Text>\n    <Button>Submit</Button>\n  </Page>\n)\n```\n\n### CRA project\n\n[create-react-app](https://github.com/facebook/create-react-app) is the most common scaffold for creating React projects,\nand it can drastically reduce the amount of time users spend configuring the toolchain.\nFor all CRA projects, users do not have to make any configuration changes and simply import the package.\n\nIn addition, here is a complete [project example](https://github.com/geist-org/react-getting-started) using Geist on CRA for reference.\n\n### Next.js project\n\n[Next.js](https://nextjs.org/) is a React server-side rendering framework. Using Geist on framework Next.js requires custom `_app.jsx` files,\nOnce the project has been initialized, add the `/pages/_app.jsx` file to the `/pages` folder and add the following content:\n\n```jsx\n// NAME:pages/_app.jsx\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\n\nconst App = ({ Component, pageProps }) => {\n  return (\n    <GeistProvider>\n      <CssBaseline />\n      <Component {...pageProps} />\n    </GeistProvider>\n  )\n}\n\nexport default App\n```\n\nIf you need server-side rendering in Next.js project,\nplease refer to the [Server-side rendering](/en-us/guide/server-render) subsection to complete the configuration.\n\nIn addition, we have provided a complete [Next.js application](https://github.com/geist-org/geist-ui/blob/master/examples/create-next-app/README.md) example for reference.\n\n<Text h3>\n  Font rendering on Windows{' '}\n  <Text span type=\"secondary\" font=\".75em\" style={{ textTransform: 'uppercase' }}>\n    [Optional]\n  </Text>\n</Text>\n\nSome fonts in Web applications do not render best on the _Windows_ platform, or you may think font rendering is not good enough for some character sets (Chinese, Japanese etc.). In this case, you can introduce additional font packages to optimize the rendering:\n\n> You don't need to modify any CSS files or declare fonts.\n\n#### Install `inter-ui`:\n\n<Snippet>yarn add inter-ui</Snippet>\n\n#### Add `Inter Font` to your project:\n\n<Code block my={0} width=\"100%\">\n  <span className=\"token keyword module\">import</span>{' '}\n  <span className=\"token string\">'inter-ui/inter.css'</span>\n</Code>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/guide/introduction.mdx",
    "content": "import Layout from 'lib/components/layout'\nimport { Note } from 'components'\n\nexport const meta = {\n  title: 'Introduction',\n  group: 'Getting Started',\n  index: 5,\n}\n\n## Introduction\n\n### About\n\n**Geist UI** is an elegant and beautiful React component library with Geek style,\noriginating from [Vercel](https://vercel.com?utm_source=geist-ui&utm_campaign=oss) design system.\n\nWith Geist's unique advantages in text layout, optimization of light and dark lines, and scale components,\nyou can easily create clean and powerful personal sites, or quickly build modern web applications based on highly customizable design system.\n\nGet start on Geist with the [guide](/en-us/guide/installation),\nor view full [project examples](https://github.com/geist-org/geist-ui/tree/master/examples).\n\n<Note label=\"\" type=\"warning\">\n  <b>This is a COMMUNITY PROJECT, not associated with Vercel.</b>\n</Note>\n\n### Contact\n\n- [Report an issue](https://github.com/geist-org/geist-ui/issues/new)\n- [Chat on GitHub Discussions](https://github.com/geist-org/geist-ui/discussions)\n- Share your work on the [Slack](https://github.com/geist-org/geist-ui/discussions/572) channel\n- We welcome feedback and ideas. We also love PRs\n\n### Open Source\n\n- [Release Notes](https://github.com/geist-org/geist-ui/releases)\n- [Contribution Guide](https://github.com/geist-org/geist-ui/blob/master/.github/CONTRIBUTING.md)\n- [Code of Conduct](https://github.com/geist-org/geist-ui/blob/master/.github/CODE_OF_CONDUCT.md)\n- License: [MIT LICENSE](https://github.com/geist-org/geist-ui/blob/master/LICENSE)\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/guide/scale.mdx",
    "content": "import { Layout, Attributes, GridDemo } from 'lib/components'\nimport { Note, Display, Button } from 'components'\n\nexport const meta = {\n  title: 'Scale',\n  group: 'Customization',\n  index: 30,\n}\n\n## Scale\n\n<Note type=\"warning\">\n  This feature was introduced in v2.2.0 and up. If you’re using older versions of Geist,\n  please upgrade before trying it out.\n</Note>\n\nThe scalable nature of the Geist gives great flexibility to each component.\nYou can freely scale the component size, rewrite the proportion of the component local space,\nadjust the inner and outer layout structure, etc.\n\nThis means that developers: can achieve a high level of customization in most scenarios without hack or override styles,\neven multiple components can be synchronized using base unit, compatible with different Web structures with low code,\nand get the best user experience in any layout style.\n\n### Scaling\n\nDifferent from common component libraries, Geist no longer uses `size` related props to control component volume.\nEach component of Geist has a suitable layout volume by default, you can dynamically scale components with the `scale` props.\n\nAs the example, the `Button` component has an equal reduction in all space occupancy (including fonts).\nGeist renders the specified volume components **realistically** by dynamically calculating the component size.\nThis ensures that the layout and typography are always the same as expected.\n\n<Display width=\"500px\" caption=\"Render Button component at 0.5 scaling\">\n  <GridDemo>\n    <Button scale={0.5}>Scale 0.5</Button>\n    <Button>Default</Button>\n  </GridDemo>\n\n```jsx\n<Button scale={0.5}>Scale 0.5</Button>\n<Button>Default</Button>\n```\n\n</Display>\n\n### Single Value\n\nFor any component, the scalable props include width, height, outer margin, inner margin, font, etc.\nYou can define each scalable property individually, a scale number or CSS string.\n\n<Display width=\"500px\">\n  <GridDemo>\n    <Button font={1.5} width=\"300px\">Full Button</Button>\n  </GridDemo>\n\n```jsx\n<Button width=\"300px\" font={1.5}>\n  Full Button\n</Button>\n```\n\n</Display>\n\n### Scaling unit\n\nThe volume of the component depends on both the `scale` property entered by the user and the **scaling unit**.\nThe default scaling unit is `16px`, but Geist allows you to customize this value at different levels to achieve a high level of customization.\n\nFor a single component, we can easily set props on the component:\n\n```jsx\n// NAME:MyButton.jsx\nexport const MyButton = () => <Button unit=\"2rem\" />\n```\n\nFor defining _scaling unit_ for multiple components at the same time, you need to create additional _Themes_ and add a new layer of\n`GeistProvider` scope. All components under this scope will share the same _scaling unit_.\n(Please refer to [Themes section](/en-us/guide/themes) for learn more)\n\n```jsx\n// NAME: src/app.jsx\nconst themeType = 'myTheme'\nconst customUnitTheme = Themes.createFromLight({\n  type: themeType,\n  layout: {\n    unit: '20px',\n  },\n})\nconst App = () => (\n  <GeistProvider themes={[customUnitTheme]} themeType={themeType}>\n    <Button />\n    <Input />\n  </GeistProvider>\n)\n```\n\n### Development with scale\n\nThe scale feature in Geist is also exported, so you can use scale to create custom components with dynamic scaling capabilities.\nFor more information, please read section [use-scale](/en-us/hooks/use-scale 'use-scale').\n\n### Alias\n\nBelow is a reference to all available props and aliases，\n`number` means that numbers can be passed for scaling, and `string` type means that CSS strings can be passed for fixed values.\n\n<Attributes.Table>\n\n| Attribute               | Description                | Type           | Default |\n| ----------------------- | -------------------------- | -------------- | ------- |\n| **scale**               | scale value                | number         | -       |\n| **unit**                | scale unit                 | string         | `16px`  |\n| **width / w**           | component width            | string, number | 'auto'  |\n| **height / h**          | component height           | string, number | 'auto'  |\n| **font**                | font size                  | string, number | -       |\n| **margin**              | all margin size            | string, number | `0`     |\n| **marginLeft / ml**     |                            | string, number  | -       |\n| **marginRight / mr**    |                            | string, number  | -       |\n| **marginTop / mt**      |                            | string, number  | -       |\n| **marginBottom / mb**   |                            | string, number  | -       |\n| **padding**             | all padding size           | string, number  | `0`     |\n| **paddingLeft / pl**    |                            | string, number  | -       |\n| **paddingRight / pr**   |                            | string, number  | -       |\n| **paddingTop / pt**     |                            | string, number  | -       |\n| **paddingBottom / pb**  |                            | string, number  | -       |\n| **mx**&nbsp;(`ml & mr`) | horizontal axis of margin  | string, number  | -       |\n| **my**&nbsp;(`mt & mb`) | vertical axis of margin    | string, number  | -       |\n| **px**&nbsp;(`pl & pr`) | horizontal axis of padding | string, number  | -       |\n| **py**&nbsp;(`pt & pb`) | vertical axis of padding   | string, number  | -       |\n\n</Attributes.Table>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/guide/server-render.mdx",
    "content": "import Layout from 'lib/components/layout'\n\nexport const meta = {\n  title: 'Server Render',\n  group: 'Getting Started',\n  index: 15,\n}\n\n## Server Render\n\n**All Components of Geist UI** are compatible with Server Render. In fact, the document you see now is rendered by the server.\n\nA common React component rendered as an HTML string on the server side usually has two parts: HTML skeleton and styles,\ntogether, they form the first string returned to the request,\nwhich effectively ensures that the user reads the page content as early as possible.\n(without having to wait for additional JavaScript resources to be loaded and parsed)\n\nIn Geist, all you have to do is add the style string generated by Geist to the server-side rendering tool, whether it's Next.js or a self-built HTTP server.\n\n### Next.js\n\nIn `next.js` framework, you need customization file `_document.js`,\nPlease refer to [Next.js](https://nextjs.org/docs/advanced-features/custom-document) official documentation for the effects.\n\nThen we add the following code to the file:\n\n```js\n// NAME:pages/_document.js\nimport { Fragment } from \"react\"\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\nimport { CssBaseline } from '@geist-ui/core'\n\nclass MyDocument extends Document {\n  static async getInitialProps (ctx) {\n    const initialProps = await Document.getInitialProps(ctx)\n    const styles = CssBaseline.flush()\n\n    return {\n      ...initialProps,\n      styles: [\n        <Fragment key=\"1\">\n          {initialProps.styles}\n          {styles}\n        </Fragment>,\n      ],\n    }\n  }\n\n  render() { ... }\n}\n```\n\nThe `flush` method in the example is used to collect the styles generated by Geist in the current page,\nonly needs to be set once per project. A complete [application example](https://github.com/unix/unix.bio/blob/template/pages/_document.tsx) is also prepared here.\n\n### Custom Server\n\nIn the custom server, also get the style set from function `CssBaseline.flush` as shown below.\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom/server'\nimport { CssBaseline } from 'geist-ui/core'\nimport App from './app'\n\nexport default (req, res) => {\n  const app = ReactDOM.renderToString(<App />)\n  const styles = CssBaseline.flush()\n  const html = ReactDOM.renderToStaticMarkup(\n    <html>\n      <head>{styles}</head>\n      <body>\n        <div id=\"root\" dangerouslySetInnerHTML={{ __html: app }} />\n      </body>\n    </html>,\n  )\n  res.end('<!doctype html>' + html)\n}\n```\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/guide/themes.mdx",
    "content": "import Layout from 'lib/components/layout'\n\nexport const meta = {\n  title: 'Themes',\n  group: 'Customization',\n  index: 25,\n}\n\n## Themes\n\n**Geist UI** now supports a variety of themes, and it is very easy to create or inherit modifications, no third-party styles or configs.\nAs a basic option, there are two themes available, `light` and `dark`.\n\n### Switch themes\n\nTo switch in the default themes you only need to set the value of `themeType`, you can follow the steps below:\n\n1. Make sure `GeistProvider` and `CssBaseline` are already on the root component.\n\n2. Update the value of `themeType`, and the theme of all components will follow automatically.\n\n```jsx\n// NAME:src/app.js\nimport { CssBaseline, GeistProvider } from '@geist-ui/core'\n\nconst App = () => {\n  const [themeType, setThemeType] = useState('light')\n  const switchThemes = () => {\n    setThemeType(last => (last === 'dark' ? 'light' : 'dark'))\n  }\n  return (\n    <GeistProvider themeType={themeType}>\n      <CssBaseline />\n      <YourComponent onClick={switchThemes} />\n    </GeistProvider>\n  )\n}\n```\n\n### Customizing theme\n\nCustomizing a theme is very simple in Geist UI, you just need to provide a new theme `Object`,\nand all the components will change automatically.\nHere is a complete [sample](https://github.com/geist-org/geist-ui/tree/master/examples/custom-themes) for reference.\n\n```jsx\nimport { CssBaseline, GeistProvider, Themes } from '@geist-ui/core'\n\nconst myTheme1 = Themes.createFromLight({\n  type: 'coolTheme',\n  palette: {\n    success: '#000',\n  },\n})\n\nconst App = () => (\n  <GeistProvider themes={[myTheme1]} themeType=\"coolTheme\">\n    <CssBaseline />\n    <YourAppComponent onClick={switchThemes} />\n  </GeistProvider>\n)\n```\n\nFunction `Themes.createFromLight` allows you to fork a new theme based on Light Theme,\nOf course, you can also create a new theme based on the dark style: `Themes.createFromDark`,\nOr create a theme based on your own theme:\n\n```jsx\nconst myBaseTheme = { ... }\nconst myTheme2 = Themes.create(myBaseTheme, {\n  type: 'myTheme2',\n  palette: {\n    success: '#000',\n  },\n})\n```\n\n### Get types\n\nWhen you need to know the detailed type definition when modifying the theme,\nyou can refer to the existing [type file](https://github.com/geist-org/geist-ui/blob/master/components/themes/presets/index.ts),\nwhich corresponds to project that support TypeScript, you can refer to the type directly in the package：\n\n```ts\nimport {\n  GeistUIThemes,\n  GeistUIThemesFont,\n  GeistUIThemesPalette,\n  GeistUIThemesExpressiveness,\n  GeistUIThemesLayout,\n} from '@geist-ui/core'\n\n// usage:\nconst myStyles: GeistUIThemes = {\n  /* ... */\n}\nconst myPalette: Partial<GeistUIThemesPalette> = {\n  /* ... */\n}\n```\n\n### Customizer\n\n#### ClassName\n\nYou can override the style by defining a `className` on the component.\n\n```jsx\nimport { Button, Row } from '@geist-ui/core'\n\nconst MyPage = () => (\n  <Row>\n    <Button className=\"page-button\">Click me!</Button>\n  </Row>\n)\n\n// in css file:\n.page-button {\n  padding: 0;\n}\n```\n\n#### Inline styles\n\nDefining an inline style will also correctly override the component.\n\n```jsx\nconst MyPage = () => (\n  <Row>\n    <Button style={{ margin: '20px' }}>Click me!</Button>\n  </Row>\n)\n```\n\n### Build components\n\nYou can use the Geist preset Hooks to get the theme states to create your own components.\nFor more information, please refer to [useTheme](/en-us/hooks/use-theme) documentation.\n\n```jsx\nimport { useTheme } from '@geist-ui/core'\n\nconst MyComponent = () => {\n  const theme = useTheme()\n  return (\n    <div style={{ color: theme.palette.success }}>\n      <span>hello world!</span>\n    </div>\n  )\n}\n```\n\n### Themes APIs\n\n`Themes` contains some static methods that are useful when working with custom themes:\n\n- `Themes.create` - create a new theme object.\n- `Themes.createFromDark` - create a new theme object based on Dark Theme.\n- `Themes.createFromLight` - create a new theme object based on Light Theme.\n- `Themes.isPresetTheme` - Check if a theme is the base of Geist UI.\n- `Themes.isAvailableThemeType` - Check if the name of the theme is available.\n- `Themes.hasUserCustomTheme` - Check if a list of themes has a custom.\n- `Themes.getPresets` - Get a default list of themes.\n- `Themes.getPresetStaticTheme` - Get the theme loaded by Geist UI default.\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/index.js",
    "content": "import redirect from 'lib/redirect'\n\nexport default redirect('/en-us/hooks/use-keyboard')\n"
  },
  {
    "path": "pages/en-us/hooks/use-body-scroll.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, Spacer, Text, useBodyScroll } from 'components'\n\nexport const meta = {\n  title: 'useBodyScroll',\n  group: 'Utilities',\n}\n\n## useBodyScroll\n\nDisable scrolling behavior for body or any element, it is useful for displaying popup element or menus.\n\nIf the page's scrollbar is set to a user-defined `width` before scrolling is disabled, a `paddingRight` value will be added after disabling to adapt.\n\n<Playground\n  desc=\"Click button to disable scrolling.\"\n  scope={{ Button, Spacer, Text, useBodyScroll }}\n  code={`\n() => {\n  const [hidden, setHidden] = useBodyScroll()\n  return (\n    <>\n      <Text small b type={hidden ? 'error' : 'default'}>{hidden ? 'Body disabled.' : 'Body can be scrolled.'}</Text>\n      <Spacer h={.75} />\n      <Button scale={0.5} type=\"success-light\" auto onClick={() => setHidden(true)}>disable scroll</Button>\n      <Button ml=\"20px\" scale={0.5} type=\"secondary-light\" auto onClick={() => setHidden(false)}>reset</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-body-scroll.mdx\">\n<Attributes.Title>useBodyScroll</Attributes.Title>\n\n```ts\ntype BodyScrollOptions = {\n  delayReset: number  // resume scrolling after a delay, default is 0\n}\n\nconst useBodyScroll = (\n  elementRef?: RefObject<HTMLElement> | null,\n  options?: BodyScrollOptions,\n) => [boolean, Dispatch<SetStateAction<boolean>>]\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-classes.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, useTheme } from 'components'\n\nexport const meta = {\n  title: 'useClasses',\n  group: 'Development',\n  index: 104,\n}\n\n## useClasses\n\nTechnically, this is not a hooks, it just uses the nomenclature of hooks as well.\n`useClasses` is used to mix strings, objects, expressions, etc. into class-names, and remove the extra space characters.\nIt is actually similar in function to [classnames](https://www.npmjs.com/package/classnames), but much more compact and lower of size.\n\nThe original purpose of creating an additional hooks instead of using a package from the community was to reduce the size of the package,\nthere are not a lot of complex class-names expressions to deal with in _Geist_, just for regular space sign removal.\n\n### Basic usage\n\nRemove spaces from multiple characters：\n\n```tsx\nimport { useClasses } from '@geist-ui/core'\n\nexport default ({ className }) => {\n  const myClass = 'button'\n\n  // output -> \"button \"\n  return <div className={`${myClass} ${className}`} />\n\n  // output -> \"button\"\n  return <div className={useClasses(myClass, className)} />\n}\n```\n\nAdd an expression based on class-names:\n\n```tsx\nexport default ({ className }) => {\n  const classes = useClasses('button', isHover ? 'hover' : 'base', className)\n\n  // output -> \"button hover\"\n  // output -> \"button base\"\n  return <div className={classes} />\n}\n```\n\n### Parse Object\n\nFor more complex scenarios, we can use hooks to parse an object and output a string:\n\n```tsx\nexport default ({ active, disabled }) => {\n  const classes = useClasses('button', {\n    active,\n    'button-disabled': disabled,\n  })\n\n  // output -> \"button active\"\n  // output -> \"button active button-disabled\"\n  return <div className={classes} />\n}\n```\n\n### Boundary Scenes\n\nAny value that can be implicitly typed to false will be ignored:\n\n```tsx\nuseClasses('') // output -> \"\"\nuseClasses(null) // output -> \"\"\nuseClasses('btn', undefined) // output -> \"btn\"\nuseClasses({ active: null }) // output -> \"\"\nuseClasses(0) // output -> \"\"\nuseClasses(false, 'btn', '') // output -> \"btn\"\n```\n\n<Attributes edit=\"/pages/en-us/hooks/use-classes.mdx\">\n<Attributes.Title>useClasses</Attributes.Title>\n\n```ts\ntype useClasses = (input: string | Object | null | undefined | boolean | number) => string\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-click-away.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Link, Card, Spacer, useClickAway } from 'components'\n\nexport const meta = {\n  title: 'useClickAway',\n  group: 'Utilities',\n}\n\n## useClickAway\n\nDetect if a click event happened outside an element.\n\nThis is custom React hooks, you need to follow the <Link target=\"_blank\" color href=\"https://reactjs.org/docs/hooks-rules.html\">Basic Rules</Link> when you use it.\n\n<Playground\n  desc=\"Click outside the green card to trigger the callback.\"\n  scope={{ useClickAway }}\n  code={`\n() => {\n  const ref = React.useRef()\n  const [count, setCount] = React.useState(0)\n  useClickAway(ref, () => setCount(last => last + 1))\n  return (\n    <div ref={ref} style={{ background: 'green', display: 'flex' }}>\n      <p style={{ fontSize: '2rem' }}>{count}</p>\n    </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-click-away.mdx\">\n<Attributes.Title>useClickAway</Attributes.Title>\n\n```ts\nconst useClickAway = (\n  ref: MutableRefObject<HTMLElement | null>,\n  handler: (event: MouseEvent) => void,\n) => void\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-clipboard.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useClipboard, Link, Button, useToasts, Spacer } from 'components'\n\nexport const meta = {\n  title: 'useClipboard',\n  group: 'Utilities',\n}\n\n## useClipboard\n\nCopy string to clipboard.\n\nThis is custom React hooks, you need to follow the <Link target=\"_blank\" color href=\"https://reactjs.org/docs/hooks-rules.html\">Basic Rules</Link> when you use it.\n\n<Playground\n  scope={{ useClipboard, Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const { copy } = useClipboard()\n  const handler = () => {\n    copy('hello, geist-ui')\n    setToast({ text: 'Text copied.' })\n  }\n  return (\n    <>\n      <Button scale={0.5} auto onClick={handler}>Copy</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-clipboard.mdx\">\n<Attributes.Title>useClipboard</Attributes.Title>\n\n```ts\ntype UseClipboardOptions = {\n  onError: Function\n}\n\ntype CopyResult = {\n  copy: (text: string) => void\n}\n\nconst useClipboard = (options?: UseClipboardOptions) => CopyResult\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-current-state.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useCurrentState, Link, Button, Spacer } from 'components'\n\nexport const meta = {\n  title: 'useCurrentState',\n  group: 'Development',\n  index: 101,\n}\n\n## useCurrentState\n\nGet **the latest value** in functional component. By default, `state` in a React function component\ncan only get the value at render time, not the latest.\n\nThis is a small tool to get the latest value, It is very useful in async actions such as `setTimeout`.\nif you like a bigger solution,\ntry <Link target=\"_blank\" color href=\"https://reactjs.org/docs/hooks-reference.html#usereducer\">useReducer</Link>.\n\nThis is custom React hooks, you need to follow the <Link target=\"_blank\" color href=\"https://reactjs.org/docs/hooks-rules.html\">Basic Rules</Link> when you use it.\n\n<Playground\n  scope={{ useCurrentState, Button }}\n  code={`\n() => {\n  const [value, setValue] = React.useState(0)\n  const [value2, setValue2, value2Ref] = useCurrentState(0)\n  const handler = () => {\n    setValue(pre => pre + 1)\n    setValue2(pre => pre + 1)\n    const str = \\`render state: \\${value}, the latest value: \\${value2Ref.current}\\`\n    alert(str)\n  }\n  return (\n    <Button scale={0.5} auto onClick={handler}>Click to show</Button>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-current-state.mdx\">\n<Attributes.Title>useCurrentState</Attributes.Title>\n\n```ts\ntype CurrentStateType<S> = [\n  S,\n  Dispatch<SetStateAction<S>>,\n  MutableRefObject<S>,\n]\n\nconst useCurrentState<S> = (\n  initialState: S | () => S,\n) => CurrentStateType<S>\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-input.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useInput, Input, Button, Spacer } from 'components'\n\nexport const meta = {\n  title: 'useInput',\n  group: 'Enhancement',\n  index: 10,\n}\n\n## useInput\n\n`useInput` provides automatic binding for component [Input](/en-us/components/input), which can reduce the amount of repetitive code and improve the development experience.\nUsing this hooks behaves the same as if you had added `React.useState` manually.\n\n<Playground\n  desc=\"Use hooks to capture changes.\"\n  scope={{ Input, useInput, Button, Spacer }}\n  code={`\n() => {\n  const { state, setState, reset, bindings } = useInput('Geist UI')\n  React.useEffect(() => console.log(state), [state])\n  return (\n    <>\n      <Input {...bindings} />\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/2} onClick={() => setState(Math.random().toString(32))}>set value</Button>\n      <Button auto scale={1/2} ml=\"20px\" onClick={() => reset()}>reset value</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-input.mdx\">\n<Attributes.Title>useInput</Attributes.Title>\n\n```ts\ntype useInput = (initialValue: string) => {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  reset: () => void\n  bindings: {\n    value: string\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  }\n}\n```\n\n<Attributes.Title>KeyboardOptions</Attributes.Title>\n\n| Option         | Description                                        | Type         |\n| -------------- | -------------------------------------------------- | ------------ |\n| **state**      | the value of the Input                             | `string`     |\n| **setState**   | same as React.setState                             | -            |\n| **currentRef** | the current value of Input                         | `string`     |\n| **reset**      | reset the value of Input                           | `() => void` |\n| **bindings**   | auto-binding objects conforming to the Input props | -            |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-keyboard.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useKeyboard, KeyCode, KeyMod, Keyboard, Input, Link } from 'components'\n\nexport const meta = {\n  title: 'useKeyboard',\n  group: 'Enhancement',\n  index: 5,\n}\n\n## useKeyboard\n\nReact hooks for listen to multiple keyboard events.\n\n<Playground\n  desc=\"Global keyboard events.\"\n  scope={{ useKeyboard, KeyCode, KeyMod, Keyboard }}\n  code={`\n() => {\n  useKeyboard(\n    () => alert('save success!'),\n    [KeyCode.KEY_S, KeyMod.CtrlCmd]\n  )\n  return <div>Press <Keyboard command scale={0.5}>S</Keyboard> to save.</div>\n}\n`}\n/>\n\n<Playground\n  title=\"Element Event\"\n  desc=\"keyboard events listening on elements.\"\n  scope={{ useKeyboard, KeyCode, KeyMod, Keyboard, Input }}\n  code={`\n() => {\n  const { bindings } = useKeyboard(\n    () => alert('A is not allowed'),\n    [KeyCode.KEY_A],\n    { disableGlobalEvent: true },\n  )\n  return (\n  <div>\n    <p>Keyboard events are triggered only when the element is activated.</p>\n    <Input {...bindings} placeholder=\"Press A\" />\n  </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hook/use-keyboard.mdx\">\n<Attributes.Title>useKeyboard</Attributes.Title>\n\n```ts\ntype KeyboardOptions = {\n  disableGlobalEvent: boolean,\n  stopPropagation: boolean\n  preventDefault: boolean\n  capture: boolean\n  event: 'keydown' | 'keypress' | 'keyup'\n}\n\nconst useKeyboard = (\n  handler: (event: React.KeyboardEvent) => void,\n  keyBindings: Array<number> | number,\n  options?: KeyboardOptions,\n) => void\n```\n\n<Attributes.Title>KeyboardOptions</Attributes.Title>\n\n| Option                 | Description                         | Type      | Accepted values                  | Default   |\n| ---------------------- | ----------------------------------- | --------- | -------------------------------- | --------- |\n| **disableGlobalEvent** | disable global events from document | `boolean` | -                                | `false`   |\n| **stopPropagation**    | stop event Propagation              | `boolean` | -                                | `false`   |\n| **preventDefault**     | block the default behavior of event | `boolean` | -                                | `true`    |\n| **capture**            | set event type to \"capture\"         | `boolean` | -                                | `false`   |\n| **event**              | keyboard event type                 | `string`  | `'keydown', 'keypress', 'keyup'` | `keydown` |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-media-query.mdx",
    "content": "import { Layout, Playground, PlaygroundTitle, Attributes } from 'lib/components'\nimport { useMediaQuery, Link, Code, Spacer } from 'components'\nimport NextLink from 'next/link'\n\nexport const meta = {\n  title: 'useMediaQuery',\n  group: 'Utilities',\n}\n\n## useMediaQuery\n\nCSS media query hooks, it is implemented through the `MediaQuery` API.\nIf you just want to build the layout, try <NextLink href=\"/en-us/components/grid\"><Link color>Grid Component</Link></NextLink>.\n\nThis is custom React hooks, you need to follow the <Link target=\"_blank\" color href=\"https://reactjs.org/docs/hooks-rules.html\">Basic Rules</Link> when you use it.\n\n<Playground\n  scope={{ useMediaQuery, Code }}\n  code={`\n() => {\n  const isXS = useMediaQuery('xs')\n  const isSM = useMediaQuery('sm')\n  const isMD = useMediaQuery('md')\n  const isLG = useMediaQuery('lg')\n  const isXL = useMediaQuery('xl')\n  return (\n    <>\n      MediaQuery match: <Code>{isXS && 'xs'}{isSM && 'sm'}{isMD && 'md'}{isLG && 'lg'}{isXL && 'xl'}</Code>.\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"Match Type\"\n  desc=\"You can choose to match up or down.\"\n  scope={{ useMediaQuery, Code }}\n  code={`\n() => {\n  const upMD = useMediaQuery('md', { match: 'up' })\n  return (\n    <>\n      Current screen width <b>{upMD ? '>=' : '<='}</b> <Code>md</Code>.\n    </>\n  )\n}\n`}\n/>\n\n<PlaygroundTitle\n  title=\"custom breakpoints\"\n  desc=\"Override the default breakpoints of the `@geist-ui/core`.\"\n/>\n\n```tsx\nconst breakpoints: GeistUIThemesBreakpoints = {\n  xs: { min: '0', max: '650px' },\n  sm: { min: '650px', max: '900px' },\n  md: { min: '900px', max: '1280px' },\n  lg: { min: '1280px', max: '1920px' },\n  xl: { min: '1920px', max: '10000px' },\n}\n\nconst App = () => {\n  const myTheme = Themes.createFromLight({\n    type: 'myTheme',\n    breakpoints,\n  })\n  return (\n    <GeistProvider themes={[myTheme]} themeType=\"myTheme\">\n      <CssBaseline />\n      <AppComponent />\n    </GeistProvider>\n  )\n}\n```\n\n<Attributes edit=\"/pages/en-us/hooks/use-media-query.mdx\">\n<Attributes.Title>useMediaQuery</Attributes.Title>\n\n```ts\ntype ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mobile'\n\ntype ResponsiveOptions = {\n  match?: 'up' | 'down'\n  ssrMatchMedia?: (query: string) => { matches: boolean }\n}\n\nconst useMediaQuery = (breakpoint: ResponsiveBreakpoint, options?: ResponsiveOptions) =>\n  boolean\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-modal.mdx",
    "content": "import { Layout, Playground, Attributes } from \"lib/components\";\nimport { useModal, Modal, Button } from \"components\";\n\nexport const meta = {\n  title: \"useModal\",\n  group: \"Enhancement\",\n  index: 11,\n};\n\n## useModal\n\n`useModal` provides automatic binding for component [Modal](/en-us/components/modal), which can reduce the amount of repetitive code and improve the development experience.\nUsing this hooks behaves the same as if you had added `React.useState` manually.\n\nThis hooks also supports use on [Select component](/en-us/components/select \"Select Component\").\n\n<Playground\n  desc=\"Use hooks to control `Modal`.\"\n  scope={{ Modal, Button, useModal }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n  return (\n    <>\n      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>\n      <Modal {...bindings}>\n        <Modal.Title>Modal</Modal.Title>\n        <Modal.Subtitle>This is a modal</Modal.Subtitle>\n        <Modal.Content>\n          <p>Some content contained within the modal.</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>\n        <Modal.Action>Submit</Modal.Action>\n      </Modal>\n    </>\n  )\n}`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-modal.mdx\" >\n<Attributes.Title>useModal</Attributes.Title>\n\n```ts\ntype useModal = (initialVisible: boolean) => {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n  currentRef: MutableRefObject<boolean>;\n  bindings: {\n    visible: boolean;\n    onClose: () => void;\n  };\n};\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>;\n"
  },
  {
    "path": "pages/en-us/hooks/use-scale.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, useTheme } from 'components'\n\nexport const meta = {\n  title: 'useScale',\n  group: 'Development',\n  index: 103,\n}\n\n## useScale\n\nRemember the elastic scaling feature mentioned in the [scale](/en-us/guide/scale 'Scale') subsection,\nwhich gave the Geist components amazing imagination and extensibility,\nand now you can add elastic scaling features to your own components with the help of the `useScale` hooks.\n\n### Scale the width\n\nAs a first example, let's prepare a simple component with a fixed width:\n\n```tsx\nconst MyComponent = ({ width: string = '20px' }) => {\n  return <div style={{ width }}>Scale Component</div>\n}\n```\n\nAlthough the component accepts a `string` parameter to define the `width`, we can't control the multiplier of the width,\nsay `1.35` times the width, unless it's manually calculated and then filled in, which seems fine,\nbut when our component can set more than 10 styles, the calculation of these values is very tedious.\n\nNow we try to bind the component to the scale of Geist:\n\n```tsx\nimport { withScale, useScale } from '@geist-ui/core'\n\nconst MyComponent = () => {\n  const { SCALES } = useScale()\n  return <div style={{ width: SCALES.width(1.25) }}>Scale Component</div>\n}\n\nexport default withScale(MyComponent)\n```\n\n`withScale` can transform any component into a dynamically scaled component and automatically **add props and types** to the component.\nYou just need to set `useScale` within the component to get the `SCALES`, and then add the bindings for the `SCALES` for each style.\n\nThe default unit of Scale is `16px`, when we need to set the default width to `20px`, Obviously `20px` is 1.25 times more than `16px`,\nso we get `SCALES.width(1.25)`.\n\nThe components of the above example should be used as follows:\n\n```tsx\n<MyComponent width={0.5} />\n<MyComponent width=\"10px\" />\n<MyComponent width=\"auto\" />\n<MyComponent unit=\"10rem\" />\n```\n\n### Unconventional defaults\n\nIn a few components where we want the default width to be `auto` (or others), and allow user-defined `width` to override this value,\nthen within the Scale component we want to follow the following rules:\n\n- When the initial value is a special character (`initial` etc.), the component cannot be scaled by a factor of.\n- The user can still override the initial value with the specified value.\n\nFor a simple component, the following example can be used to illustrate:\n\n```tsx\nconst MyComponent = () => {\n  const { SCALES } = useScale()\n  return <div style={{ width: SCALES.width(1, 'auto') }}>Fixed Component</div>\n}\n\nexport default withScale(MyComponent)\n```\n\nWhen we use this component, the width cannot be scaled by a multiple anymore:\n\n```tsx\n<MyComponent width={0.1} />\n\n// -> The width is still \"auto\"\n// -> \"auto\" cannot be calculated mathematically\n```\n\nWhen we enter specific values to override, it still works well:\n\n```tsx\n<MyComponent width=\"100px\" />\n\n// -> The width is \"100px\"\n```\n\n### Get native props\n\nWhen a component is combined with `withScale`, multiple props and corresponding types are automatically added,\nwe can use the `useScale` function to get the corresponding value.\nNote, however, that the value obtained from the `useScale` function is computed, not the native value.\n\n```tsx\nconst MyComponent = () => {\n  const { SCALES } = useScale()\n\n  console.log(SCALES.width(1))\n\n  return null\n}\n\n<MyComponent width={2} />  // output -> 'calc(2 * 16px)'\n<MyComponent />            // output -> '16px'\n```\n\nThe value obtained from `SCALES.width` is not exactly equal to the user input (`width=`),\nbecause we want to make sure that the component works even if the user does nothing.\nSo, if you need to get the **native value** of the user input, use a separate function to get:\n\n```ts\nconst MyComponent = () => {\n  const { getScaleProps } = useScale()\n\n  console.log(getScaleProps('width'))\n\n  return null\n}\n\n<MyComponent width={2} />     // output -> 2\n<MyComponent width=\"20px\" />  // output -> '20px'\n<MyComponent />               // output -> undefined\n```\n\n\n<Attributes edit=\"/pages/en-us/hooks/use-scale.mdx\">\n<Attributes.Title>withScale</Attributes.Title>\n\n```ts\ntype withScale = (Render: React.ComponentType) => React.ComponentType\n```\n\n<Attributes.Title>useScale</Attributes.Title>\n\n```ts\ntype useScale = () => ScaleConfig\n\ntype ScaleConfig = {\n  SCALES: DynamicScales\n  // Get the native value of scale prop\n  getScaleProps: GetScalePropsFunction\n  // Base value of the current component\n  unit: string\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-tabs.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useTabs, Tabs, Button, Spacer } from 'components'\n\nexport const meta = {\n  title: 'useTabs',\n  group: 'Enhancement',\n  index: 11,\n}\n\n## useTabs\n\n`useTabs` provides automatic binding for component [Tabs](/en-us/components/tabs), which can reduce the amount of repetitive code and improve the development experience.\nUsing this hooks behaves the same as if you had added `React.useState` manually.\n\n<Playground\n  desc=\"Control components with Hooks.\"\n  scope={{ Tabs, Button, Spacer, useTabs }}\n  code={`\n() => {\n  const { setState, bindings } = useTabs('1')\n  return (\n    <>\n      <Button scale={1/3} font=\"12px\" onClick={() => setState('2')}>\n        To Extensible\n      </Button>\n      <Spacer h={.5} />\n      <Tabs {...bindings}>\n        <Tabs.Item label=\"stateless\" value=\"1\">HTTP is stateless, but not sessionless.</Tabs.Item>\n        <Tabs.Item label=\"extensible\" value=\"2\">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>\n      </Tabs>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-tabs.mdx\" >\n<Attributes.Title>useTabs</Attributes.Title>\n\n```ts\ntype useTabs = (initialValue: string) => {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  bindings: {\n    value: string\n    onChange: (val: string) => void\n  }\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-theme.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, useTheme } from 'components'\n\nexport const meta = {\n  title: 'useTheme',\n  group: 'Development',\n  index: 100,\n}\n\n## useTheme\n\nThis hooks can get the theme states of Geist within any component, and can track changes in states.\nIn the default scenario (you haven't changed the `themeType`), hooks gets the same value as `Themes.getPresets`.\n\nUsually the components from Geist are already added with theme states, you don't need to change it,\nthis hooks just helps you to build your own components using Geist's themes.\n\nNotice in the example below that after we define the component using Theme,\nthe properties of the custom component will change according to the current Geist's theme,\nswitching themes in the upper right corner of the website, the color of the components we create will also change with the theme.\n\n<Playground\n  scope={{ useTheme, Button }}\n  desc=\"\"\n  code={`\n() => {\n  const theme = useTheme()\n  return (\n    <div style={{\n        width: '200px',\n        height: '50px',\n        borderRadius: theme.layout.radius,\n        background: theme.palette.accents_2\n      }}\n    >\n      <span style={{\n          color: theme.palette.accents_7,\n          paddingLeft: theme.layout.gapQuarter\n        }}\n      >My first component.</span>\n    </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-theme.mdx\">\n<Attributes.Title>useTheme</Attributes.Title>\n\n```ts\nconst theme: GeistUIThemes = useTheme()\n\nexport type GeistUIThemes = {\n  type: string\n  font: GeistUIThemesFont\n  layout: GeistUIThemesLayout\n  palette: GeistUIThemesPalette\n  breakpoints: GeistUIThemesBreakpoints\n  expressiveness: GeistUIThemesExpressiveness\n}\n```\n\n<Attributes.Title>Get preset types</Attributes.Title>\n\n```ts\nimport {\n  GeistUIThemes,\n  GeistUIThemesFont,\n  GeistUIThemesPalette,\n  GeistUIThemesExpressiveness,\n  GeistUIThemesLayout,\n} from '@geist-ui/core'\n\nconst myFontTheme: GeistUIThemesFont = { }\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/hooks/use-toast.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useToasts, Button, Spacer, Link } from 'components'\n\nexport const meta = {\n  title: 'useToast',\n  group: 'Enhancement',\n  index: 12,\n}\n\n## useToast\n\nDisplay an important message globally.\n\n<Playground\n  desc=\"Basic usage.\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = () => setToast({ text: 'HTTP is stateless, but not sessionless.', delay: 2000 })\n  return <Button scale={2/3} auto onClick={click}>Show Toast</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"Multiline\"\n  desc=\"Display multiline or overlong text.\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = () => setToast({ text: 'HTTP is a protocol which allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more.' })\n  return <Button scale={2/3} auto onClick={click}>Show Toast</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"Action\"\n  desc=\"Add a custom button to the Toast.\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const action = {\n    name: 'alert',\n    handler: () => alert('alert from toast')\n  }\n  const click = () => setToast({\n    text: 'HTTP is stateless, but not sessionless.',\n    actions: [action],\n  })\n  return <Button scale={2/3} auto onClick={click} type=\"secondary\">Show Action</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"Cancel\"\n  desc=\"Use `passive` to change the style of the button.\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const action = {\n    name: 'cancel',\n    passive: true,\n    handler: (event, cancel) => cancel()\n  }\n  const click = () => setToast({\n    text: 'HTTP is stateless, but not sessionless.',\n    actions: [action],\n  })\n  return <Button scale={2/3} auto onClick={click}>Show Toast</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"ReactNode\"\n  desc=\"Show more information by replacing the string with a `ReactNode`.\"\n  scope={{ Button, useToasts, Link }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = () => setToast({\n    text: <p>Click the <Link target=\"_blank\" color block href=\"https://github.com/geist-org/geist-ui\">URL</Link> to learn more</p>,\n    delay: 4000,\n  })\n  return <Button scale={2/3} auto onClick={click}>Show Toast</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"Type\"\n  scope={{ Button, useToasts, Spacer }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = type => setToast({\n    text: 'HTTP is stateless, but not sessionless.',\n    type,\n  })\n  return (\n    <>\n    <Button scale={2/3} auto onClick={() => click('success')} type=\"success\">Show Success</Button>\n    <Spacer inline w={.5} />\n    <Button scale={2/3} auto onClick={() => click('warning')} type=\"warning\">Show Warning</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/en-us/hooks/use-toast.mdx\">\n<Attributes.Title>useToasts</Attributes.Title>\n\n```ts\nconst {\n  // All Toasts currently in DOM\n  toasts: Array<Toast>\n\n  // Set a displayable Toast\n  setToast: (toast: ToastInput) => void\n\n  // Hide all Toast immediately\n  removeAll: () => void\n\n  // Query by id to get an instance of Toast\n  findToastOneByID: (ident: string) => Toast | undefined\n\n  // Remove the specified Toast by id\n  removeToastOneByID: (ident: string) => void\n} = useToasts(layout: ToastLayout)\n```\n\n<Attributes.Title>ToastLayout</Attributes.Title>\n\n| Option        | Description                  | Type                              | Default       |\n| ------------- | ---------------------------- | --------------------------------- | ------------- |\n| **padding**   | CSS properties               | `string`                          | -             |\n| **margin**    | CSS properties               | `string`                          | -             |\n| **width**     | CSS properties               | `string`                          | -             |\n| **maxWidth**  | CSS properties               | `string`                          | `90vw`        |\n| **maxHeight** | CSS properties               | `string`                          | `75px`        |\n| **placement** | the pop-up position of toast | [ToastPlacement](#toastplacement) | `bottomRight` |\n\n<Attributes.Title>ToastInput</Attributes.Title>\n\n| Option      | Description                                  | Type                        | Default   |\n| ----------- | -------------------------------------------- | --------------------------- | --------- |\n| **id**      | unique identifier that can be auto generated | `string`                    | -         |\n| **text**    | content displayed in toast                   | `string`, `ReactNode`       | -         |\n| **type**    | the type of toast                            | [ToastTypes](#toasttypes)   | `default` |\n| **delay**   | close after a specified time                 | `number`                    | `2000`    |\n| **actions** | specify a default action                     | [ToastAction](#toastaction) | -         |\n\n<Attributes.Title>ToastPlacement</Attributes.Title>\n\n```ts\ntype ToastPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'\n```\n\n<Attributes.Title>ToastAction</Attributes.Title>\n\n```ts\ninterface ToastAction {\n  name: string\n  handler: (event: React.MouseEventHandler<HTMLButtonElement>, cancel: Function) => void\n  passive?: boolean\n}\n```\n\n<Attributes.Title>ToastTypes</Attributes.Title>\n\n```ts\ntype ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/en-us/index.tsx",
    "content": "import React from 'react'\nimport { NextPage } from 'next'\nimport { useTheme, Grid } from 'components'\nimport PackageIcon from '@geist-ui/icons/package'\nimport FeatherIcon from '@geist-ui/icons/feather'\nimport GitHubIcon from '@geist-ui/icons/github'\nimport { HomeCell } from 'lib/components'\n\nconst Application: NextPage<{}> = () => {\n  const theme = useTheme()\n\n  return (\n    <>\n      <div className=\"layout\">\n        <div className=\"hero\">\n          <h1 className=\"title\">Geist</h1>\n          <h3 className=\"desc\">\n            An open source design system for building modern websites and applications.\n          </h3>\n        </div>\n\n        <Grid.Container gap={2} justify=\"center\">\n          <Grid xs={24} md={8}>\n            <HomeCell\n              icon={<PackageIcon />}\n              url=\"/en-us/components\"\n              title=\"Components\"\n              desc=\"Ever-increasing list of concise and aesthetic components.\"\n            />\n          </Grid>\n          <Grid xs={24} md={8}>\n            <HomeCell\n              icon={<FeatherIcon />}\n              url=\"/en-us/guide/themes\"\n              title=\"Customizable\"\n              desc=\"Configure sizes, colors, appearances, shapes, and more.\"\n            />\n          </Grid>\n          <Grid xs={24} md={8}>\n            <HomeCell\n              icon={<GitHubIcon />}\n              url=\"https://github.com/geist-org/geist-ui\"\n              title=\"Open Sourced\"\n              desc=\"Geist is open sourced and available free under MIT licence.\"\n            />\n          </Grid>\n        </Grid.Container>\n      </div>\n      <style jsx>{`\n        .layout {\n          min-height: calc(100vh - var(--geist-page-nav-height));\n          max-width: ${theme.layout.pageWidthWithMargin};\n          margin: 0 auto;\n          padding: 0 ${theme.layout.gap} calc(${theme.layout.gap} * 2);\n          box-sizing: border-box;\n        }\n        .hero {\n          height: calc(100vh - var(--geist-page-nav-height) - 300px);\n          min-height: 30vh;\n          max-width: 500px;\n          margin: 0 auto;\n          text-align: center;\n          align-items: center;\n          justify-content: center;\n          display: flex;\n          flex-direction: column;\n        }\n        .title {\n          font-size: 3.75rem;\n          font-weight: 700;\n          margin: 0;\n        }\n        .desc {\n          color: ${theme.palette.accents_5};\n          font-size: 1.5rem;\n          font-weight: 500;\n          margin: 0 0 ${theme.layout.gap};\n        }\n      `}</style>\n    </>\n  )\n}\n\nexport default Application\n"
  },
  {
    "path": "pages/zh-cn/components/auto-complete.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { AutoComplete, Spacer, Badge, Text, Grid, Code } from 'components'\nimport { useState, useRef, useEffect } from 'react'\n\nexport const meta = {\n  title: '自动完成 Autocomplete',\n  group: '数据录入',\n  index: 104,\n}\n\n## Autocomplete / 自动完成\n\n输入框的自动完成控制。\n\n<Playground\n  desc=\"基础示例，添加备选列表到输入框中。\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete placeholder=\"在这里输入\" options={options} />\n}\n`}\n/>\n\n<Playground\n  title=\"只允许选择输入\"\n  desc=\"只通过 Select 事件更改值。\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete disableFreeSolo options={options} initialValue=\"sydney\" />\n}\n`}\n/>\n\n<Playground\n  desc=\"禁用所有的交互。\"\n  title=\"禁用\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete disabled options={options} initialValue=\"London\" />\n}\n`}\n/>\n\n<Playground\n  desc=\"根据当前输入内容变更备选的列表选项。\"\n  title=\"搜索\"\n  scope={{ AutoComplete, useState }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = useState()\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    setOptions(relatedOptions)\n  }\n  return <AutoComplete options={options} placeholder=\"在这里输入\" onSearch={searchHandler} />\n}\n`}\n/>\n\n<Playground\n  title=\"搜索中\"\n  desc=\"在搜索中的等待时显示友好的 UI 与提示。\"\n  scope={{ AutoComplete, useState, useEffect, useRef }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = useState()\n  const [searching, setSearching] = useState(false)\n  const timer = useRef()\n  // triggered every time input\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    setSearching(true)\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    // this is mock async request\n    // you can get data in any way\n    timer.current && clearTimeout(timer.current)\n    timer.current = setTimeout(() => {\n      setOptions(relatedOptions)\n      setSearching(false)\n      clearTimeout(timer.current)\n    }, 1000)\n  }\n  return (\n    <AutoComplete searching={searching}\n      options={options}\n      placeholder=\"在这里输入\"\n      onSearch={searchHandler} />\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"定制搜索中的提示\"\n  desc=\"你可以用文字或任何组件替代默认的提示文字。\"\n  scope={{ AutoComplete }}\n  code={`\n<AutoComplete searching placeholder=\"在这里输入\" width=\"100%\">\n  <AutoComplete.Searching>\n    <span style={{ color: 'red' }}>等待中...</span>\n  </AutoComplete.Searching>\n</AutoComplete>\n`}\n/>\n\n<Playground\n  title=\"定制无结果\"\n  desc=\"你也可以用文字或任何组件替代默认的无搜索结果提示。\"\n  scope={{ AutoComplete, useState }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = useState()\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    setOptions(relatedOptions)\n  }\n  return (\n    <AutoComplete placeholder=\"在这里输入\" width=\"100%\" options={options} onSearch={searchHandler}>\n      <AutoComplete.Empty>\n        <span>没有结果</span>\n      </AutoComplete.Empty>\n    </AutoComplete>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"定制选项\"\n  desc=\"你可以详细定制每一个备选项，让 `自动完成` 组件表达更多的信息。\"\n  scope={{ AutoComplete, useState, Text, Badge, Grid }}\n  code={`\n() => {\n  const makeOption = (label, value) => (\n    <AutoComplete.Option value={value}>\n      <Grid.Container style={{ padding: '10pt 0' }}>\n        <Grid xs={24}><Text span b font=\"1.2rem\">最近的搜索结果</Text></Grid>\n        <Grid.Container xs={24}>\n          <Grid xs><Text span>{label}</Text></Grid>\n          <Grid xs={4}><Badge type=\"success\">推荐的</Badge></Grid>\n        </Grid.Container>\n      </Grid.Container>\n    </AutoComplete.Option>\n  )\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = useState()\n  const searchHandler = (currentValue) => {\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    const customOptions = relatedOptions.map(({ label, value }) => makeOption(label, value))\n    setOptions(customOptions)\n  }\n  return (\n    <AutoComplete placeholder=\"在这里输入\"\n      width=\"100%\"\n      options={options}\n      onSearch={searchHandler} />\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"可清除的\"\n  desc=\"在输入框内添加一个用作清除文字的按钮。\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const options = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  return <AutoComplete placeholder=\"在这里输入\" clearable options={options} />\n}\n`}\n/>\n\n<Playground\n  title=\"可创建的\"\n  desc=\"为任意值添加待选条目。\"\n  scope={{ AutoComplete }}\n  code={`\n() => {\n  const allOptions = [\n    { label: 'London', value: 'london' },\n    { label: 'Sydney', value: 'sydney' },\n    { label: 'Shanghai', value: 'shanghai' },\n  ]\n  const [options, setOptions] = React.useState()\n  const searchHandler = (currentValue) => {\n    const createOptions = [{\n      value: currentValue, label: 'Add \"' + currentValue + '\"'\n    }]\n    if (!currentValue) return setOptions([])\n    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))\n    const optionsWithCreatable = relatedOptions.length !== 0 ? relatedOptions : createOptions\n    setOptions(optionsWithCreatable)\n  }\n  return <AutoComplete options={options} clearable disableFreeSolo placeholder=\"Enter here\" onSearch={searchHandler} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/auto-complete.mdx\">\n<Attributes.Title>AutoComplete.Props</Attributes.Title>\n\n| 属性                  | 描述                                             | 类型                                             | 推荐值                                  | 默认      |\n| --------------------- | ------------------------------------------------ | ------------------------------------------------ | --------------------------------------- | --------- |\n| **options**           | 输入框的可选项                                   | [AutoCompleteOptions](#type-autocompleteoptions) | -                                       | -         |\n| **status**            | 输入框类型                                       | `AutoCompleteTypes`                              | [AutoCompleteTypes](#autocompletetypes) | `default` |\n| **initialValue**      | 初始值                                           | `string`                                         | -                                       | -         |\n| **value**             | 命令式的输入框的值                               | `string`                                         | -                                       | -         |\n| **width**             | 组件容器的宽度                                   | `string`                                         | -                                       | -         |\n| **clearable**         | 是否显示清除按钮                                 | `boolean`                                        | -                                       | `false`   |\n| **searching**         | 是否显示正在搜索中                               | `boolean`                                        | -                                       | `false`   |\n| **onChange**          | 输入框的值发生变化触发此事件                     | `(value: string) => void`                        | -                                       | -         |\n| **onSearch**          | 搜索事件，当用户手动输入时触发                   | `(value: string) => void`                        | -                                       | -         |\n| **onSelect**          | 当备选框被选中后触发的事件                       | `(value: string) => void`                        | -                                       | -         |\n| **dropdownClassName** | 自定义下拉框的类名                               | `string`                                         | -                                       | -         |\n| **dropdownStyle**     | 自定义下拉框的样式                               | `object`                                         | -                                       | -         |\n| **disableMatchWidth** | 禁止 Option 跟随父元素的宽度                     | `boolean`                                        | -                                       | `false`   |\n| **disableFreeSolo**   | 只允许 Select 事件更改值 (禁止 Input 输入随意值) | `boolean`                                        | -                                       | `false`   |\n| **getPopupContainer** | 下拉框渲染的父元素，默认是 `body`                | `() => HTMLElement`                              | -                                       | `body`    |\n| **ref**               | 转发的原生输入框 Ref                             | <Code>Ref<HTMLInputElement &#124; null></Code>   | -                                       | -         |\n| ...                   | 原生属性                                         | `InputHTMLAttributes`                            | `'id', 'className', ...`                | -         |\n\n<Attributes.Title alias=\"AutoComplete.Option\">AutoComplete.Item</Attributes.Title>\n\n| 属性      | 描述                       | 类型             | 推荐值                   | 默认 |\n| --------- | -------------------------- | ---------------- | ------------------------ | ---- |\n| **value** | 用于鉴别多个备选项的唯一值 | `string`         | -                        | -    |\n| ...       | 原生属性                   | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>AutoComplete.Searching</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>AutoComplete.Empty</Attributes.Title>\n\n| 属性   | 描述             | 类型             | 推荐值                   | 默认    |\n| ------ | ---------------- | ---------------- | ------------------------ | ------- |\n| hidden | 隐藏无结果提示框 | `boolean`        | -                        | `false` |\n| ...    | 原生属性         | `HTMLAttributes` | `'id', 'className', ...` | -       |\n\n<Attributes.Title>type AutoCompleteOptions</Attributes.Title>\n\n```ts\nArray<{\n  label: string\n  value: string\n} | AutoComplete.Item>\n```\n\n<Attributes.Title>AutoCompleteTypes</Attributes.Title>\n\n```ts\ntype AutoCompleteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/avatar.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Avatar, Spacer } from 'components'\n\nexport const meta = {\n  title: '头像 Avatar',\n  group: '数据展示',\n}\n\n## Avatar / 头像\n\n头像代表一个用户或团队，堆叠的头像表示了一个群体。\n\n<Playground\n  desc=\"`Avatar` 组件包含了圆形与方形。\"\n  scope={{ Avatar, Spacer }}\n  code={`\n() => {\n  const url = '/images/avatar.png'\n  return (\n    <>\n      <Avatar src={url} />\n      <Avatar src={url} />\n      <Avatar src={url} />\n      <Avatar src={url} />\n      <Spacer h={.5} />\n      <Avatar src={url} isSquare />\n      <Avatar src={url} isSquare />\n      <Avatar src={url} isSquare />\n      <Avatar src={url} isSquare />\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"文本\"\n  desc=\"在头像框内显示文本信息。\"\n  scope={{ Avatar }}\n  code={`\n<>\n  <Avatar text=\"W\" />\n  <Avatar text=\"A\" />\n  <Avatar text=\"W\" />\n  <Avatar text=\"Joe\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"头像组\"\n  desc=\"多个头像框可以堆叠在一起。\"\n  scope={{ Avatar, Spacer }}\n  code={`\n() => {\n  const url = '/images/avatar.png'\n  return (\n    <>\n      <Avatar.Group>\n        <Avatar src={url} stacked />\n        <Avatar src={url} stacked />\n        <Avatar src={url} stacked />\n        <Avatar src={url} stacked />\n      </Avatar.Group>\n      <Spacer />\n      <Avatar.Group count={12}>\n        <Avatar src={url} stacked />\n        <Avatar text=\"刘\" stacked />\n        <Avatar text=\"Ana\" stacked />\n      </Avatar.Group>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/avatar.mdx\">\n<Attributes.Title>Avatar.Props</Attributes.Title>\n\n| 属性         | 描述                         | 类型                | 推荐值                                   | 默认    |\n| ------------ | ---------------------------- | ------------------- | ---------------------------------------- | ------- |\n| **src**      | 图像链接                     | `string`            | -                                        | -       |\n| **stacked**  | 是否堆叠显示                 | `boolean`           | -                                        | `false` |\n| **text**     | 文本，当无图像链接时才会显示 | `string`            | -                                        | -       |\n| **isSquare** | 是否为方形头像               | `boolean`           | -                                        | `false` |\n| ...          | 原生属性                     | `ImgHTMLAttributes` | `'alt', 'crossOrigin', 'className', ...` | -       |\n\n<Attributes.Title>Avatar.Group.Props</Attributes.Title>\n\n| 属性      | 描述         | 类型             | 推荐值                           | 默认 |\n| --------- | ------------ | ---------------- | -------------------------------- | ---- |\n| **count** | 显示成员数量 | `number`         | -                                | -    |\n| ...       | 原生属性     | `HTMLAttributes` | `'id', 'name', 'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/badge.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Badge, Spacer, Button, Link, Avatar, useTheme } from 'components'\nimport NextLink from 'next/link'\n\nexport const meta = {\n  title: '徽章 Badge',\n  group: '数据展示',\n}\n\n## Badge / 徽章\n\n显示一个需要注意的指标。\n\n<Playground\n  scope={{ Badge, Spacer }}\n  desc=\"展示一个数字或一段文字。\"\n  code={`\n  <>\n    <Badge>1</Badge> <Spacer h={.5} />\n    <Badge>50</Badge> <Spacer h={.5} />\n    <Badge>100</Badge> <Spacer h={.5} />\n    <Badge>2020</Badge>\n  </>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"以不同的色彩表达不同的状态。\"\n  scope={{ Badge, Spacer }}\n  code={`\n  <>\n    <Badge type=\"success\">成功</Badge> <Spacer h={.5} />\n    <Badge type=\"warning\">警告</Badge> <Spacer h={.5} />\n    <Badge type=\"error\">错误</Badge> <Spacer h={.5} />\n    <Badge type=\"secondary\">次要的</Badge>\n  </>\n`}\n/>\n\n<Playground\n  title=\"Custom color\"\n  desc={\n    <>\n      了解更多颜色，请参考{' '}\n      <NextLink href=\"/zh-cn/guide/colors\">\n        <Link color>色彩章节</Link>\n      </NextLink>\n      。\n    </>\n  }\n  scope={{ Badge, Spacer, useTheme }}\n  code={`\n() => {\n  const theme = useTheme()\n  return (\n    <>\n      <Badge style={{ backgroundColor: theme.palette.successLight }}>淡色成功状态</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.successDark }}>深色成功状态</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.alert }}>警告</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.purple }}>紫色</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.violet }}>紫罗兰</Badge> <Spacer h={.5} />\n      <Badge style={{ backgroundColor: theme.palette.cyanLighter, color: theme.palette.foreground }}>淡青色</Badge> <Spacer h={.5} />\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"锚点\"\n  desc=\"将徽章固定在指定位置。\"\n  scope={{ Badge, Avatar, Spacer, Button, Link }}\n  code={`\n<>\n  <Badge.Anchor>\n    <Badge scale={0.5}>10</Badge>\n    <Avatar src=\"/images/avatar.png\" />\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor placement=\"bottomRight\">\n    <Badge scale={0.5} type=\"success\">10</Badge>\n    <Avatar scale={2} isSquare src=\"/images/avatar.png\" />\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor>\n    <Badge scale={0.5} type=\"warning\">99+</Badge>\n    <Button scale={0.5} auto>按钮</Button>\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor>\n    <Badge scale={0.5} type=\"error\" dot />\n    <Link target=\"_blank\" href=\"https://github.com/geist-org/geist-ui/\">组件库</Link>\n  </Badge.Anchor>\n  <Spacer inline w={2.5} />\n  <Badge.Anchor>\n    <Badge type=\"error\" dot padding=\"5px\" />\n    <Link target=\"_blank\" href=\"https://github.com/geist-org/geist-ui/\">分享链接</Link>\n  </Badge.Anchor>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/badge.mdx\">\n<Attributes.Title>Badge.Props</Attributes.Title>\n\n| 属性     | 描述               | 类型             | 推荐值                          | 默认      |\n| -------- | ------------------ | ---------------- | ------------------------------- | --------- |\n| **type** | 徽章的类型         | `BadgeTypes`     | [BadgeTypes](#badgetypes)       | `default` |\n| **dot**  | 忽略内容并显示圆点 | `boolean`        | -                               | `false`   |\n| ...      | 原生属性           | `HTMLAttributes` | `'alt', 'id', 'className', ...` | -         |\n\n<Attributes.Title>Badge.Anchor.Props</Attributes.Title>\n\n| 属性          | 描述           | 类型              | 推荐值                              | 默认       |\n| ------------- | -------------- | ----------------- | ----------------------------------- | ---------- |\n| **placement** | 固定徽章的位置 | `AnchorPlacement` | [AnchorPlacement](#anchorplacement) | `topRight` |\n| ...           | 原生属性       | `HTMLAttributes`  | `'alt', 'id', 'className', ...`     | -          |\n\n<Attributes.Title>BadgeTypes</Attributes.Title>\n\n```ts\ntype BadgeTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>AnchorPlacement</Attributes.Title>\n\n```ts\ntype AnchorPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/breadcrumbs.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Breadcrumbs, Spacer } from 'components'\nimport NextLink from 'next/link'\nimport Home from '@geist-ui/icons/home'\nimport Inbox from '@geist-ui/icons/inbox'\n\nexport const meta = {\n  title: '面包屑 Breadcrumbs',\n  group: '导航',\n}\n\n## Breadcrumbs / 面包屑导航\n\n显示用户在应用中的层级位置。\n\n<Playground\n  scope={{ Breadcrumbs }}\n  code={`\n<Breadcrumbs>\n  <Breadcrumbs.Item>Home</Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"\">Catalog</Breadcrumbs.Item>\n  <Breadcrumbs.Item >Page</Breadcrumbs.Item>\n</Breadcrumbs>\n`}\n/>\n\n<Playground\n  title=\"分隔符\"\n  desc=\"定制字符中的分隔符。\"\n  scope={{ Breadcrumbs, Spacer }}\n  code={`\n<>\n  <Breadcrumbs separator=\"-\">\n    <Breadcrumbs.Item>Home</Breadcrumbs.Item>\n    <Breadcrumbs.Item href=\"\">Catalog</Breadcrumbs.Item>\n    <Breadcrumbs.Item >Page</Breadcrumbs.Item>\n  </Breadcrumbs>\n  <Spacer h={.5} />\n  <Breadcrumbs separator=\">\">\n    <Breadcrumbs.Item>Home</Breadcrumbs.Item>\n    <Breadcrumbs.Separator>:</Breadcrumbs.Separator>\n    <Breadcrumbs.Item href=\"\">Components</Breadcrumbs.Item>\n    <Breadcrumbs.Item href=\"\">Basic</Breadcrumbs.Item>\n    <Breadcrumbs.Item >Button</Breadcrumbs.Item>\n  </Breadcrumbs>\n</>\n`}\n/>\n\n<Playground\n  title=\"图标\"\n  desc=\"以图标表达更多信息。\"\n  scope={{ Breadcrumbs, Home, Inbox }}\n  code={`\n<Breadcrumbs>\n  <Breadcrumbs.Item><Home /></Breadcrumbs.Item>\n  <Breadcrumbs.Item href=\"\"><Inbox /> Inbox</Breadcrumbs.Item>\n  <Breadcrumbs.Item >Page</Breadcrumbs.Item>\n</Breadcrumbs>\n`}\n/>\n\n<Playground\n  title=\"结合 NextJS\"\n  desc=\"与 `next.js` 结合使用的示例。\"\n  scope={{ Breadcrumbs, NextLink }}\n  code={`\n<Breadcrumbs>\n  <NextLink href=\"/\">\n    <Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>\n  </NextLink>\n  <NextLink href=\"/en-us/components\">\n    <Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>\n  </NextLink>\n  <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>\n</Breadcrumbs>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/breadcrumbs.mdx\">\n<Attributes.Title>Breadcrumbs.Props</Attributes.Title>\n\n| 属性          | 描述     | 类型             | 推荐值                   | 默认 |\n| ------------- | -------- | ---------------- | ------------------------ | ---- |\n| **separator** | 分隔符   | `string`         | -                        | `/`  |\n| ...           | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Breadcrumbs.Item.Props</Attributes.Title>\n\n| 属性         | 描述                  | 类型                          | 推荐值                   | 默认    |\n| ------------ | --------------------- | ----------------------------- | ------------------------ | ------- |\n| **href**     | 链接地址              | `string`                      | -                        | -       |\n| **nextLink** | 是否为 `next.js` 路由 | `boolean`                     | -                        | `false` |\n| **onClick**  | 点击事件              | `(event: MouseEvent) => void` | -                        | -       |\n| ...          | 原生属性              | `AnchorHTMLAttributes`        | `'id', 'className', ...` | -       |\n\n<Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/button-dropdown.mdx",
    "content": "import { ButtonDropdown, Spacer } from 'components'\nimport { Layout, Attributes, Playground } from 'lib/components'\nimport Plus from '@geist-ui/icons/plus'\n\nexport const meta = {\n  title: '下拉按钮 Btn Dropdown',\n  group: '导航',\n  index: 105,\n}\n\n## Button Dropdown / 下拉按钮\n\n显示相关的操作。\n\n<Playground\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown>\n  <ButtonDropdown.Item main>默认按钮</ButtonDropdown.Item>\n  <ButtonDropdown.Item>次要的按钮</ButtonDropdown.Item>\n  <ButtonDropdown.Item>第三个按钮</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  desc=\"禁用所有的按钮。\"\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown disabled>\n  <ButtonDropdown.Item main>默认动作</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"加载中\"\n  desc=\"显示一个友好的加载指示器。\"\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown loading>\n  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>\n  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  scope={{ ButtonDropdown, Spacer }}\n  code={`\n<>\n  <ButtonDropdown type=\"secondary\" scale={0.5}>\n    <ButtonDropdown.Item main>次要的</ButtonDropdown.Item>\n  </ButtonDropdown>\n  <Spacer h={.5} />\n  <ButtonDropdown type=\"success\" scale={0.5}>\n    <ButtonDropdown.Item main>成功</ButtonDropdown.Item>\n  </ButtonDropdown>\n  <Spacer h={.5} />\n  <ButtonDropdown type=\"warning\" scale={0.5}>\n    <ButtonDropdown.Item main>警告</ButtonDropdown.Item>\n  </ButtonDropdown>\n  <Spacer h={.5} />\n  <ButtonDropdown type=\"error\" scale={0.5}>\n    <ButtonDropdown.Item main>错误</ButtonDropdown.Item>\n  </ButtonDropdown>\n</>\n`}\n/>\n\n<Playground\n  title=\"多类型\"\n  desc=\"为每个按钮设定不同的类型。\"\n  scope={{ ButtonDropdown }}\n  code={`\n<ButtonDropdown auto scale={2/3}>\n  <ButtonDropdown.Item main>访问账户</ButtonDropdown.Item>\n  <ButtonDropdown.Item>屏蔽账户</ButtonDropdown.Item>\n  <ButtonDropdown.Item>锁定账户</ButtonDropdown.Item>\n  <ButtonDropdown.Item type=\"error\">移除账户</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Playground\n  title=\"自定义右侧图标\"\n  desc=\"右侧图标的色彩和大小将会被自动设置。\"\n  scope={{ ButtonDropdown, Plus }}\n  code={`\n<ButtonDropdown scale={2/3} auto icon={<Plus />}>\n  <ButtonDropdown.Item main>访问账户</ButtonDropdown.Item>\n  <ButtonDropdown.Item>屏蔽账户</ButtonDropdown.Item>\n  <ButtonDropdown.Item>锁定账户</ButtonDropdown.Item>\n  <ButtonDropdown.Item type=\"error\">移除账户</ButtonDropdown.Item>\n</ButtonDropdown>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/button-dropdown.mdx\">\n<Attributes.Title>ButtonDropdown.Props</Attributes.Title>\n\n| 属性         | 描述               | 类型                  | 推荐值                                      | 默认                   |\n| ------------ | ------------------ | --------------------- | ------------------------------------------- | ------------------ |\n| **type**     | 按钮类型           | `ButtonDropdownTypes` | [ButtonDropdownTypes](#buttondropdowntypes) | `default`            |\n| **loading**  | 显示加载中的指示器  | `boolean`             | -                                           | `false`               |\n| **auto**     | 自动缩放宽度       | `boolean`             | -                                           | `false`               |\n| **disabled** | 禁用所有按钮       | `boolean`             | -                                           | `false`               |\n| **icon**     | 右侧图标           | `ReactNode`           | -                                           | `ButtonDropdownIcon` |\n| ...          | 原生属性           | `HTMLAttributes`      | `'autoFocus', 'name', ...`                  | -                    |\n\n<Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>\n\n| 属性        | 描述             | 类型                   | 推荐值                                      | 默认      |\n| ----------- | ---------------- | ---------------------- | ------------------------------------------- | --------- |\n| **type**    | 当前单个按钮类型 | `ButtonDropdownTypes`  | [ButtonDropdownTypes](#buttondropdowntypes) | `default` |\n| **main**    | 是否为主要按钮   | `boolean`              | -                                           | `false`   |\n| **onClick** | 按钮的点击事件   | `MouseEventHandler`    | -                                           | -         |\n| ...         | 原生属性         | `ButtonHTMLAttributes` | `'id', 'name', ...`                         | -         |\n\n<Attributes.Title>ButtonDropdownTypes</Attributes.Title>\n\n```ts\ntype ButtonDropdownTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/button-group.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, Spacer, ButtonGroup } from 'components'\n\nexport const meta = {\n  title: '按钮组 Button Group',\n  group: '数据录入',\n}\n\n## Button Group / 按钮组\n\n展示一组具备相关性的按钮。\n\n<Playground\n  scope={{ Button, ButtonGroup }}\n  code={`\n<ButtonGroup>\n  <Button>One</Button>\n  <Button>Two</Button>\n  <Button>Three</Button>\n</ButtonGroup>\n`}\n/>\n\n<Playground\n  title=\"变体\"\n  desc=\"设置组内所有按钮的类型或样式。\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup type=\"success\" scale={0.5}>\n    <Button scale={0.5}>One</Button>\n    <Button scale={0.5}>Two</Button>\n    <Button scale={0.5}>Three</Button>\n  </ButtonGroup>\n  <ButtonGroup type=\"abort\" scale={0.5}>\n    <Button scale={0.5}>Action1</Button>\n    <Button scale={0.5}>Action2</Button>\n  </ButtonGroup>\n  <ButtonGroup type=\"warning\" ghost scale={0.5}>\n    <Button scale={0.5}>Action1</Button>\n    <Button scale={0.5}>Action2</Button>\n  </ButtonGroup>\n  <ButtonGroup type=\"success-light\" scale={0.5}>\n    <Button scale={0.5}>One</Button>\n    <Button scale={0.5}>Two</Button>\n    <Button scale={0.5}>Three</Button>\n  </ButtonGroup>\n</>\n`}\n/>\n\n<Playground\n  title=\"大小\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup scale={2/3}>\n    <Button scale={2/3}>One</Button>\n    <Button scale={2/3}>Two</Button>\n    <Button scale={2/3}>Three</Button>\n  </ButtonGroup>\n  <ButtonGroup scale={1/3}>\n    <Button scale={1/3}>Action1</Button>\n    <Button scale={1/3}>Action2</Button>\n  </ButtonGroup>\n</>\n`}\n/>\n\n<Playground\n  title=\"垂直的\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup vertical>\n    <Button>One</Button>\n    <Button>Two</Button>\n    <Button>Three</Button>\n    <Button>Four</Button>\n  </ButtonGroup>\n</>\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  desc=\"禁用组内所有的按钮。\"\n  scope={{ Button, ButtonGroup }}\n  code={`\n<>\n  <ButtonGroup scale={2/3} disabled>\n    <Button scale={2/3}>One</Button>\n    <Button scale={2/3}>Two</Button>\n    <Button scale={2/3}>Three</Button>\n  </ButtonGroup>\n</>\n`} />\n<Attributes edit=\"/pages/zh-cn/components/button-group.mdx\">\n<Attributes.Title>ButtonGroup.Props</Attributes.Title>\n\n| 属性         | 描述                   | 类型                   | 推荐值                      | 默认      |\n| ------------ | ---------------------- | ---------------------- | --------------------------- | --------- |\n| **type**     | 按钮类型               | `ButtonTypes`          | [ButtonTypes](#buttontypes) | `default` |\n| **ghost**    | 相反色彩模式的按钮     | `boolean`              | -                           | `false`   |\n| **vertical** | 以垂直方式显示所有按钮 | `boolean`              | -                           | `false`   |\n| **disabled** | 是否禁用所有按钮       | `boolean`              | -                           | `false`   |\n| ...          | 原生属性               | `ButtonHTMLAttributes` | `'id', 'className', ...`    | -         |\n\n<Attributes.Title>ButtonTypes</Attributes.Title>\n\n```ts\ntype ButtonTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'abort'\n  | 'secondary-light'\n  | 'success-light'\n  | 'warning-light'\n  | 'error-light'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/button.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, Spacer, Grid, Code } from 'components'\nimport Settings from '@geist-ui/icons/settings'\nimport UserX from '@geist-ui/icons/userX'\nimport Power from '@geist-ui/icons/power'\n\nexport const meta = {\n  title: '按钮 Button',\n  group: '通用',\n}\n\n## Button / 按钮\n\n用于触发一个操作。\n\n<Playground\n  desc=\"基础的 `Button` 包含一个动画效果。\"\n  scope={{ Button }}\n  code={`\n<Button>动作</Button>\n`}\n/>\n\n<Playground\n  title=\"加载中\"\n  desc=\"表示正在运行或加载中的状态。\"\n  scope={{ Button, Spacer }}\n  code={`\n<>\n  <Button loading>Action</Button>\n  <Spacer h={.5} />\n  <Button loading scale={0.75}>Action</Button>\n  <Spacer h={.5} />\n  <Button loading auto type=\"success\" scale={2/3}>Action</Button>\n</>\n`}\n/>\n\n<Playground\n  title=\"禁用的\"\n  desc=\"不对任何操作进行响应。\"\n  scope={{ Button }}\n  code={`\n<Button disabled>点击</Button>\n`}\n/>\n\n<Playground\n  title=\"阴影\"\n  desc=\"使用阴影突出显示更高层级的按钮。\"\n  scope={{ Button }}\n  code={`\n<Button shadow type=\"secondary\">阴影</Button>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"不同状态下的按钮。\"\n  scope={{ Button, Grid }}\n  code={`\n<Grid.Container gap={2}>\n  <Grid><Button auto type=\"secondary\">次要的</Button></Grid>\n  <Grid><Button auto type=\"success\">成功</Button></Grid>\n  <Grid><Button auto type=\"warning\">警告</Button></Grid>\n  <Grid><Button auto type=\"error\">错误</Button></Grid>\n  <Grid><Button auto type=\"abort\">中止</Button></Grid>\n  <Grid><Button auto type=\"secondary-light\">次要的 浅色</Button></Grid>\n  <Grid><Button auto type=\"success-light\">成功 浅色</Button></Grid>\n  <Grid><Button auto type=\"warning-light\">警告 浅色</Button></Grid>\n  <Grid><Button auto type=\"error-light\">错误 浅色</Button></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"反色\"\n  desc=\"底色与主色相反的透明按钮。\"\n  scope={{ Button, Grid }}\n  code={`\n<Grid.Container gap={1.5}>\n  <Grid><Button type=\"secondary\" ghost auto scale={0.7}>Secondary</Button></Grid>\n  <Grid><Button type=\"success\" ghost auto scale={0.7}>Success</Button></Grid>\n  <Grid><Button type=\"warning\" ghost auto scale={0.7}>Warning</Button></Grid>\n  <Grid><Button type=\"error\" ghost auto scale={0.7}>Error</Button></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"伸缩性\"\n  desc=\"不同大小的按钮组件。\"\n  scope={{ Button, Grid }}\n  code={`\n<Grid.Container gap={1.5}>\n  <Grid><Button auto scale={0.25}>0.25</Button></Grid>\n  <Grid><Button auto scale={0.35}>0.35</Button></Grid>\n  <Grid><Button auto scale={1/2}>1 / 2</Button></Grid>\n  <Grid><Button auto scale={0.75}>0.75</Button></Grid>\n  <Grid><Button auto padding={0}>NoPadding</Button></Grid>\n  <Grid><Button auto font={0.25}>Small Font</Button></Grid>\n  <Grid><Button auto pl={0} ml=\"25px\">Offset</Button></Grid>\n  <Grid xs={12}><Button width=\"100%\">Full Width</Button></Grid>\n  <Grid xs={12}>\n    <Button auto width=\"30%\" mx=\"5px\">proportion</Button>\n    <Button auto width=\"30%\" mx=\"5px\">proportion</Button>\n    <Button auto width=\"30%\" mx=\"5px\">proportion</Button>\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"图标\"\n  desc=\"按钮内的图标色彩和大小将会被自动设置。\"\n  scope={{ Button, Spacer, Settings, UserX, Power }}\n  code={`\n<>\n  <Button iconRight={<Power />} auto scale={2/3} />\n  <Spacer w={.5} inline />\n  <Button iconRight={<Power />} auto scale={2/3} px={0.6} />\n  <Spacer h={.5} />\n  <Button icon={<Settings />} auto>Action</Button>\n  <Spacer h={.5} />\n  <Button icon={<Settings />} type=\"success\" scale={0.85}>Success</Button>\n  <Spacer h={.5} />\n  <Button icon={<Settings />} type=\"secondary\">Success</Button>\n  <Spacer h={.5} />\n  <Button icon={<UserX />} type=\"error\" ghost>Remove User</Button>\n  <Spacer h={.5} />\n  <Button icon={<UserX />} disabled>Remove User</Button>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/button.mdx\">\n<Attributes.Title>Button.Props</Attributes.Title>\n\n| 属性          | 描述                   | 类型                                            | 推荐值                      | 默认      |\n| ------------- | ---------------------- | ----------------------------------------------- | --------------------------- | --------- |\n| **type**      | 按钮的类型             | `ButtonTypes`                                   | [ButtonTypes](#buttontypes) | `default` |\n| **ghost**     | 是否为反色按钮         | `boolean`                                       | -                           | `false`   |\n| **loading**   | 是否显示加载中的指示器 | `boolean`                                       | -                           | `false`   |\n| **shadow**    | 是否显示阴影           | `boolean`                                       | -                           | `false`   |\n| **auto**      | 自动缩放宽度           | `boolean`                                       | -                           | `false`   |\n| **effect**    | 是否显示动画效果       | `boolean`                                       | -                           | `true`    |\n| **disabled**  | 是否禁用按钮           | `boolean`                                       | -                           | `false`   |\n| **onClick**   | 点击事件               | `MouseEventHandler`                             | -                           | -         |\n| **icon**      | 在按钮内显示图标       | `ReactNode`                                     | -                           | -         |\n| **iconRight** | 在按钮右侧显示图标     | `ReactNode`                                     | -                           | -         |\n| **htmlType**  | 按钮的原生类型属性     | `ButtonHTMLAttributes.type`                     | -                           | `button`  |\n| **ref**       | Ref 转发               | <Code>Ref<HTMLButtonElement &#124; null></Code> | -                           | -         |\n| ...           | 原生属性               | `ButtonHTMLAttributes`                          | `'id', 'className', ...`    | -         |\n\n<Attributes.Title>ButtonTypes</Attributes.Title>\n\n```ts\ntype ButtonTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'abort'\n  | 'secondary-light'\n  | 'success-light'\n  | 'warning-light'\n  | 'error-light'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/capacity.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Capacity, Spacer, useTheme } from 'components'\n\nexport const meta = {\n  title: '容量 Capacity',\n  group: '数据展示',\n}\n\n## Capacity / 容量\n\n显示一个容量指示器。\n\n<Playground\n  scope={{ Capacity, Spacer }}\n  code={`\n<>\n  <Capacity value={15} /> <Spacer />\n  <Capacity value={45} /> <Spacer />\n  <Capacity value={95} />\n</>\n`}\n/>\n\n<Playground\n  title=\"固定色彩\"\n  desc=\"指定一个颜色以覆盖默认的。\"\n  scope={{ Capacity, Spacer, useTheme }}\n  code={`\n() => {\n  const theme = useTheme()\n  return <Capacity value={75} color={theme.palette.success} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/capacity.mdx\">\n<Attributes.Title>Capacity.Props</Attributes.Title>\n\n| 属性      | 描述         | 类型             | 推荐值             | 默认 |\n| --------- | ------------ | ---------------- | ------------------ | ---- |\n| **value** | 当前的容量值 | `number`         | -                  | 0    |\n| **limit** | 最大的容量值 | `number`         | -                  | 100  |\n| **color** | CSS 颜色值   | `string`         | -                  | -    |\n| ...       | 原生属性     | `HTMLAttributes` | `'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/card.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Card, Grid, Link, Spacer, Text, Image, Divider, Code } from 'components'\n\nexport const meta = {\n  title: '卡片 Card',\n  group: '表面',\n}\n\n## Card / 卡片\n\n基础的组件容器。\n\n<Playground\n  scope={{ Card }}\n  code={`\n<Card>\n  <p>一个基础的卡片。</p>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"可悬停的\"\n  scope={{ Card }}\n  code={`\n<Card hoverable>\n  <p>可悬停的卡片。</p>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"阴影\"\n  scope={{ Card, Text }}\n  code={`\n<Card shadow>\n  <Text h4 my={0}>这是一个 React 组件。</Text>\n  <Text>阴影卡片组件。</Text>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"以各式色彩表达不同的类型或状态。\"\n  scope={{ Card, Grid, Text }}\n  code={`\n() => {\n  const types = ['secondary', 'success', 'warning', 'error', 'dark', 'alert', 'purple', 'violet', 'cyan']\n  return (\n    <Grid.Container gap={1.5}>\n      {types.map(type => (\n        <Grid xs={8} key={type}>\n          <Card type={type} width=\"100%\">\n            <Text h4 my={0} style={{ textTransform: 'capitalize' }}>{type}</Text>\n            <Text>{type}</Text>\n          </Card>\n        </Grid>\n      ))}\n    </Grid.Container>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"卡片页脚\"\n  scope={{ Card, Link, Grid, Text }}\n  code={`\n<Grid.Container gap={1.5}>\n  <Grid xs={12} justify=\"center\">\n    <Card width=\"100%\">\n      <Text h4 my={0}>Geist UI React</Text>\n      <Text>Modern and minimalist React UI library.</Text>\n      <Card.Footer>\n        <Link color target=\"_blank\" href=\"https://github.com/geist-org/geist-ui\">Visit source code on GitHub.</Link>\n      </Card.Footer>\n    </Card>\n  </Grid>\n  <Grid xs={12} justify=\"center\">\n    <Card width=\"100%\" type=\"dark\">\n      <Text h4 my={0}>Geist UI React</Text>\n      <Text>Modern and minimalist React UI library.</Text>\n      <Card.Footer>\n        <Link target=\"_blank\" href=\"https://github.com/geist-org/geist-ui\">Visit source code on GitHub.</Link>\n      </Card.Footer>\n    </Card>\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"组合图片\"\n  scope={{ Card, Link, Spacer, Text, Image }}\n  code={`\n<Card width=\"400px\">\n  <Image src=\"https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png\"\n   height=\"200px\" width=\"400px\" draggable={false} />\n  <Text h4 mb={0}>Geist UI React</Text>\n  <Text type=\"secondary\" small>Modern and minimalist React UI library.</Text>\n  <Card.Footer>\n    <Link block target=\"_blank\" href=\"https://github.com/geist-org/geist-ui\">Visit source code on GitHub.</Link>\n  </Card.Footer>\n</Card>\n`}\n/>\n\n<Playground\n  title=\"组合分割线\"\n  desc=\"使用分割线展示不同类型的内容。\"\n  scope={{ Card, Text, Divider, Code }}\n  code={`\n<Card width=\"400px\">\n  <Card.Content>\n    <Text b my={0}>语法描述</Text>\n  </Card.Content>\n  <Divider my={0} />\n  <Card.Content>\n    <Text>Object 构造函数为给定值创建一个对象包装器，返回一个与给定值对应类型的对象。</Text>\n    <Text>当以非构造函数形式被调用时，Object 等同于 <Code>new Object()</Code>.</Text>\n  </Card.Content>\n</Card>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/card.mdx\">\n<Attributes.Title>Card.Props</Attributes.Title>\n\n| 属性          | 描述                 | 类型                  | 推荐值                  | 默认      |\n| ------------- | -------------------- | --------------------- | ----------------------- | --------- |\n| **hoverable** | 是否在悬停时增加阴影 | `boolean`             | -                       | `false`   |\n| **shadow**    | 是否总是显示阴影     | `boolean`             | -                       | `false`   |\n| **type**      | 卡片的类型           | [CardType](#cardtype) | -                       | `default` |\n| ...           | 原生属性             | `HTMLAttributes`      | `'id', className', ...` | -         |\n\n<Attributes.Title alias=\"Card.Body\">Card.Content.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                  | 默认 |\n| ---- | -------- | ---------------- | ----------------------- | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', className', ...` | -    |\n\n<Attributes.Title alias=\"Card.Actions\">Card.Footer.Props</Attributes.Title>\n\n| 属性                  | 描述                     | 类型             | 推荐值                  | 默认    |\n| --------------------- | ------------------------ | ---------------- | ----------------------- | ------- |\n| **disableAutoMargin** | 取消自动设置的 Margin 值 | `boolean`        | -                       | `false` |\n| ...                   | 原生属性                 | `HTMLAttributes` | `'id', className', ...` | -       |\n\n<Attributes.Title>CardType</Attributes.Title>\n\n```ts\ntype CardType =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n  | 'alert'\n  | 'purple'\n  | 'violet'\n  | 'cyan'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/checkbox.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Checkbox, Spacer } from 'components'\n\nexport const meta = {\n  title: '复选框 Checkbox',\n  group: '数据录入',\n}\n\n## Checkbox / 复选框\n\n用于表示多个可选项。\n\n<Playground\n  desc=\"设置 `initialChecked` 属性初始的状态。\"\n  scope={{ Checkbox }}\n  code={`\n  <Checkbox initialChecked={true}>墨西哥</Checkbox>\n`}\n/>\n\n<Playground\n  title=\"禁用的\"\n  scope={{ Checkbox, Spacer }}\n  code={`\n<>\n  <Checkbox>悉尼</Checkbox>\n  <Spacer h={.5} />\n  <Checkbox disabled checked={true}>北京</Checkbox>\n</>\n`}\n/>\n\n<Playground\n  title=\"组\"\n  desc=\"管理一组 `Checkbox`。\"\n  scope={{ Checkbox, Spacer }}\n  code={`\n() => {\n  const handler = value => {\n    console.log(value)\n  }\n  return (\n    <Checkbox.Group value={['sydney']} onChange={handler}>\n      <Checkbox value=\"sydney\">悉尼</Checkbox>\n      <Checkbox value=\"beijing\">北京</Checkbox>\n      <Checkbox value=\"london\">伦敦</Checkbox>\n      <Checkbox value=\"tokyo\">东京</Checkbox>\n    </Checkbox.Group>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/checkbox.mdx\">\n<Attributes.Title>Checkbox.Props</Attributes.Title>\n\n| 属性               | 描述                        | 类型                  | 推荐值                     | 默认    |\n| ------------------ | --------------------------- | --------------------- | -------------------------- | ------- |\n| **checked**        | 是否选中                    | `boolean`             | -                          | -       |\n| **initialChecked** | 初始状态是否选中            | `boolean`             | -                          | `false` |\n| **onChange**       | 复选框的变化事件            | `CheckboxEvent`       | -                          | -       |\n| **value**          | 唯一的鉴别值 (仅在组内可用) | `string`              | -                          | -       |\n| **disabled**       | 禁用复选框                  | `boolean`             | -                          | `false` |\n| ...                | 原生属性                    | `LabelHTMLAttributes` | `'form', 'className', ...` | -       |\n\n<Attributes.Title>Checkbox.Group.Props</Attributes.Title>\n\n| 属性         | 描述               | 类型                         | 推荐值                   | 默认    |\n| ------------ | ------------------ | ---------------------------- | ------------------------ | ------- |\n| **value**    | 选中的一组值       | `Array<string>`              | -                        | `[]`    |\n| **disabled** | 禁用一个组的复选框 | `boolean`                    | -                        | `false` |\n| **onChange** | 复选框的变化事件   | `(values: string[]) => void` | -                        | -       |\n| ...          | 原生属性           | `HTMLAttributes`             | `'id', 'className', ...` | -       |\n\n<Attributes.Title>CheckboxEvent</Attributes.Title>\n\n```ts\ninterface CheckboxEventTarget {\n  checked: boolean\n}\n\nexport interface CheckboxEvent {\n  target: CheckboxEventTarget\n  stopPropagation: () => void\n  preventDefault: () => void\n  nativeEvent: React.ChangeEvent\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/code.mdx",
    "content": "import { Code, Note, Link, Text } from 'components'\nimport NextLink from 'next/link'\nimport { Layout, Playground, Attributes, ParsedCodes } from 'lib/components'\n\nexport const meta = {\n  title: '代码 Code',\n  group: '通用',\n}\n\n## Code / 代码\n\n以标准化的方式展示源代码。想要展示 Shell 代码片段或是一个命令？可以试试 [Snippet](/zh-cn/components/snippet) (片段) 组件。\n\n<Playground\n  desc=\"基础的行内代码。\"\n  scope={{ Code, Text }}\n  code={`\n<Text my={0}>Run <Code>npm i @geist-ui/core</Code> to install.</Text>\n`}\n/>\n\n<Playground\n  title=\"代码块\"\n  desc=\"多行的代码块展示。\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Types }}\n  code={`\n<Code block my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Playground\n  title=\"宽度\"\n  desc=\"手动地指定宽度，或其他样式。\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Greeting }}\n  code={`\n<Code block width=\"50%\" my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Playground\n  title=\"标题\"\n  desc=\"为代码块添加标题描述信息。\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}\n  code={`\n<Code block name=\"/Components/Clock.jsx\" my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Playground\n  title=\"经典样式\"\n  desc=\"以边框代替背景块的经典设计样式。\"\n  scope={{ Code, ExampleCodes: ParsedCodes.Clock }}\n  code={`\n<Code block classic name=\"/Components/Clock.jsx\" my={0}><ExampleCodes /></Code>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/code.mdx\">\n<Attributes.Title>Code.Props</Attributes.Title>\n\n| 属性        | 描述                   | 类型             | 推荐值             | 默认    |\n| ----------- | ---------------------- | ---------------- | ------------------ | ------- |\n| **block**   | 展示多行的代码块       | `boolean`        | -                  | `false` |\n| **name**    | 显示在代码块顶部的文字 | `string`         | -                  | -       |\n| **classic** | 以经典样式展示代码块   | `boolean`        | -                  | `false` |\n| ...         | 原生属性               | `HTMLAttributes` | `'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/collapse.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Collapse, Spacer, Text, Code } from 'components'\n\nexport const meta = {\n  title: '折叠框 Collapse',\n  group: '表面',\n}\n\n## Collapse / 折叠框\n\n折叠显示大段的文本或组件内容，通常也被称为手风琴。\n\n<Playground\n  scope={{ Collapse, Text }}\n  desc=\"默认只展示标题。\"\n  code={`\n<Collapse.Group>\n  <Collapse title=\"超文本标记语言\">\n    <Text>HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。\n    它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。</Text>\n  </Collapse>\n  <Collapse title=\"层叠样式表\">\n    <Text>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，\n    用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。\n    CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</Text>\n  </Collapse>\n</Collapse.Group>\n`}\n/>\n\n<Playground\n  title=\"展开的\"\n  desc=\"指定初始时如何显示组件。\"\n  scope={{ Collapse, Text }}\n  code={`\n<Collapse.Group>\n  <Collapse title=\"超文本标记语言\" initialVisible>\n    <Text>HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。\n    它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。</Text>\n  </Collapse>\n  <Collapse title=\"层叠样式表\">\n    <Text>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，\n    用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。\n    CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</Text>\n  </Collapse>\n</Collapse.Group>\n`}\n/>\n\n<Playground\n  title=\"子标题\"\n  desc=\"使用文本或组件作为子标题。\"\n  scope={{ Collapse, Text }}\n  code={`\n<Collapse.Group>\n  <Collapse title=\"超文本标记语言\" subtitle=\"HyperText Markup Language\">\n    <Text>HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。\n    它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。</Text>\n  </Collapse>\n  <Collapse title=\"层叠样式表\" subtitle={<>Cascading Style Sheets，缩写为 <Text b>CSS</Text></>}>\n    <Text>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，\n    用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。\n    CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</Text>\n  </Collapse>\n</Collapse.Group>\n`}\n/>\n\n<Playground\n  title=\"阴影\"\n  desc=\"用更高的层级表示重要的信息。\"\n  scope={{ Collapse, Text, Code }}\n  code={`\n<Collapse shadow title=\"超文本标记语言\" subtitle={<Code>HyperText Markup Language</Code>}>\n  <Text>HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。\n      它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。</Text>\n</Collapse>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/collapse.mdx\">\n<Attributes.Title>Collapse.Props</Attributes.Title>\n\n| 属性               | 描述           | 类型             | 推荐值                           | 默认    |\n| ------------------ | -------------- | ---------------- | -------------------------------- | ------- |\n| **title**(必须的)  | 标题值         | `string`         | -                                | -       |\n| **subtitle**       | 子标题内容     | `string`         | -                                | -       |\n| **initialVisible** | 初始时是否展开 | `boolean`        | -                                | `false` |\n| **shadow**         | 以阴影模式展示 | `boolean`        | -                                | `false` |\n| ...                | 原生属性       | `HTMLAttributes` | `'id', 'name', 'className', ...` | -       |\n\n<Attributes.Title>Collapse.Group.Props</Attributes.Title>\n\n| 属性          | 描述                          | 类型             | 推荐值                           | 默认   |\n| ------------- | ----------------------------- | ---------------- | -------------------------------- | ------ |\n| **accordion** | 手风琴模式 (一次最多打开一个) | `boolean`        | -                                | `true` |\n| ...           | 原生属性                      | `HTMLAttributes` | `'id', 'name', 'className', ...` | -      |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/description.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Description, Code } from 'components'\n\nexport const meta = {\n  title: '描述 Description',\n  group: '数据展示',\n}\n\n## Description / 描述\n\n显示简短的信息和描述内容。\n\n<Playground\n  desc=\"`Description` 组件默认包含标题和内容。\"\n  scope={{ Description }}\n  code={`\n<Description title=\"章节的标题\" content=\"关于这部分的数据。\" />\n`}\n/>\n\n<Playground\n  title=\"组件组合\"\n  desc=\"与其他组件结合使用。\"\n  scope={{ Description, Code }}\n  code={`\n<Description title=\"推荐的文章\" content={<>在 React 中父子组件 <Code>通信</Code> 的最佳实践。</>} />\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/description.mdx\">\n<Attributes.Title>Description.Props</Attributes.Title>\n\n| 属性        | 描述     | 类型                   | 推荐值 | 默认 |\n| ----------- | -------- | ---------------------- | ------ | ---- |\n| **title**   | 标题文本 | `ReactNode` / `string` | -      | -    |\n| **content** | 内容文本 | `ReactNode` / `string` | -      | -    |\n| ...         | 原生属性 | `HTMLAttributes`       | -      | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/display.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Display, Code, Snippet, Image } from 'components'\n\nexport const meta = {\n  title: '陈列框 Display',\n  group: '数据展示',\n}\n\n## Display / 陈列框\n\n以居中对齐的方式展示重要的信息或图像。\n\n<Playground\n  desc=\"为一张图片添加描述文本。\"\n  scope={{ Display, Image }}\n  code={`\n  <Display shadow caption=\"用于构建现代应用的开源设计系统。\">\n    <Image width=\"435px\" height=\"200px\" src=\"/images/geist-banner.png\" />\n  </Display>\n`}\n/>\n\n<Playground\n  title=\"与代码组件组合\"\n  desc=\"展示多行的代码块。\"\n  scope={{ Display, Code }}\n  code={`\n() => {\n  const codes = \\`{\n  \"build\": {\n    \"env\": {\n      \"VARIABLE_NAME\": \"@secret-name\"\n    }\n  }\n}\\`\n  return (\n    <Display width=\"500px\" caption=\"为应用程序的构建定义环境变量。\">\n      <Code block>{codes}</Code>\n    </Display>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"与片段组件组合\"\n  desc=\"展示 Shell 代码片段。\"\n  scope={{ Display, Snippet }}\n  code={`\n<Display width=\"500px\" caption=\"运行此命令以下载库。\">\n  <Snippet type=\"dark\">yarn add @geist-ui/core</Snippet>\n</Display>\n`}\n/>\n\n<Playground\n  title=\"组件标题\"\n  desc=\"在 `caption` 属性上使用组件表达更丰富的信息。\"\n  scope={{ Display, Code, Image }}\n  code={`\n  <Display shadow caption={<p>访问地址 <Code>geist-ui.dev</Code> 获取更多的文档信息。</p>}>\n    <Image width=\"650px\" height=\"297px\" src=\"/images/geist-banner.png\" />\n  </Display>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/display.mdx\">\n<Attributes.Title>Display.Props</Attributes.Title>\n\n| 属性        | 描述                          | 类型                   | 推荐值 | 默认    |\n| ----------- | ----------------------------- | ---------------------- | ------ | ------- |\n| **caption** | description for display block | `ReactNode` / `string` | -      | -       |\n| **shadow**  | show shadow                   | `boolean`              | -      | `false` |\n| ...         | 原生属性                      | `HTMLAttributes`       | -      | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/divider.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Divider, Text } from 'components'\n\nexport const meta = {\n  title: '分割线 Divider',\n  group: '其他',\n}\n\n## Divider / 分割线\n\n用于分割不同内容块的线条。\n\n<Playground\n  desc=\"基础示例。\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。\n    这些消息头描述了用户倾向的选择。\n  </Text>\n  <Divider />\n  <Text>\n    服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。\n    相关算法与具体的服务器相关，并没有在规范中进行规定。\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"分割文字\"\n  desc=\"在分割线上显示文字或组件。\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。\n    这些消息头描述了用户倾向的选择。\n  </Text>\n  <Divider>内容协商</Divider>\n  <Text>\n    服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。\n    相关算法与具体的服务器相关，并没有在规范中进行规定。\n  </Text>\n  <Divider align=\"start\">标准头信息</Divider>\n  <Text>\n    HTTP/1.1 规范指定了一系列的标准消息头用于启动服务端驱动型内容协商 （Accept、Accept-Charset、 Accept-Encoding、Accept-Language）。\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"间隔\"\n  desc=\"自定义组件周围的间隔大小。\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。\n    这些消息头描述了用户倾向的选择。\n  </Text>\n  <Divider h={5}>内容协商</Divider>\n  <Text>\n    服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。\n    相关算法与具体的服务器相关，并没有在规范中进行规定。\n  </Text>\n  <Divider h={5} my={5}>标准头信息</Divider>\n  <Text>\n    HTTP/1.1 规范指定了一系列的标准消息头用于启动服务端驱动型内容协商 （Accept、Accept-Charset、 Accept-Encoding、Accept-Language）。\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"以不同的色彩表达类型。\"\n  scope={{ Divider, Text }}\n  code={`\n<>\n  <Text>\n    在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。\n    这些消息头描述了用户倾向的选择。\n  </Text>\n  <Divider h={2} type=\"success\">内容协商</Divider>\n  <Text>\n    服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。\n    相关算法与具体的服务器相关，并没有在规范中进行规定。\n  </Text>\n  <Divider h={20} type=\"warning\">标准头信息</Divider>\n  <Text>\n    HTTP/1.1 规范指定了一系列的标准消息头用于启动服务端驱动型内容协商 （Accept、Accept-Charset、 Accept-Encoding、Accept-Language）。\n  </Text>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/divider.mdx\">\n<Attributes.Title>Divider.Props</Attributes.Title>\n\n| 属性      | 描述             | 类型                          | 推荐值                           | 默认      |\n| --------- | ---------------- | ----------------------------- | -------------------------------- | --------- |\n| **type**  | 分割线的类型     | [DividerTypes](#dividertypes) | -                                | `default` |\n| **align** | 子组件的对齐方式 | [DividerAlign](#divideralign) | -                                | `center`  |\n| ...       | 原生属性         | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -         |\n\n<Attributes.Title>DividerTypes</Attributes.Title>\n\n```ts\ntype DividerTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n<Attributes.Title>DividerAlign</Attributes.Title>\n\n```ts\ntype DividerAlign = 'center' | 'start' | 'left' | 'end' | 'right'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/dot.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Dot } from 'components'\n\nexport const meta = {\n  title: '点 Dot',\n  group: '数据展示',\n}\n\n## Dot / 点\n\n点可以表达语句的状态，或是仅用于分类装饰。\n\n<Playground\n  scope={{ Dot }}\n  code={`\n<>\n  <Dot style={{ marginRight: '15px' }} />\n  <Dot style={{ marginRight: '15px' }} type=\"success\" />\n  <Dot style={{ marginRight: '15px' }} type=\"warning\" />\n  <Dot type=\"error\" />\n</>\n`}\n/>\n\n<Playground\n  scope={{ Dot }}\n  code={`\n<>\n  <Dot style={{ marginRight: '20px' }}>已取消</Dot>\n  <Dot style={{ marginRight: '20px' }} type=\"success\">已准备</Dot>\n  <Dot style={{ marginRight: '20px' }} type=\"warning\">警告</Dot>\n  <Dot type=\"error\">错误</Dot>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/dot.mdx\">\n<Attributes.Title>Dot.Props</Attributes.Title>\n\n| 属性     | 描述     | 类型             | 推荐值                | 默认      |\n| -------- | -------- | ---------------- | --------------------- | --------- |\n| **type** | 点的类型 | `DotTypes`       | [DotTypes](#dottypes) | `default` |\n| ...      | 原生属性 | `HTMLAttributes` | -                     | -         |\n\n<Attributes.Title>DotTypes</Attributes.Title>\n\n```ts\ntype DotTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/drawer.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Drawer, Button } from 'components'\n\nexport const meta = {\n  title: '抽屉 Drawer',\n  group: '反馈',\n}\n\n## Drawer / 抽屉\n\n固定在屏幕边缘的可交互元素组。\n\n<Playground\n  desc=\"基础示例。\"\n  scope={{ Drawer, Button }}\n  code={`\n() => {\n  const [state, setState] = React.useState(false)\n  return (\n    <div>\n      <Button auto onClick={() => setState(true)} scale={1/2}>Show Drawer</Button>\n      <Drawer visible={state} onClose={() => setState(false)} placement=\"right\">\n        <Drawer.Title>标题</Drawer.Title>\n        <Drawer.Subtitle>子标题</Drawer.Subtitle>\n        <Drawer.Content>\n          <p>Geist UI 是我最爱的组件库。</p>\n        </Drawer.Content>\n      </Drawer>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"定位\"\n  scope={{ Drawer, Button }}\n  code={`\n() => {\n  const [state, setState] = React.useState(false)\n  const [placement, setPlacement] = React.useState('')\n  const open = (text) => {\n    setPlacement(text)\n    setState(true)\n  }\n  return (\n    <div>\n      <Button auto onClick={() => open('top')} scale={1/2} mr=\"10px\">Top</Button>\n      <Button auto onClick={() => open('right')} scale={1/2} mr=\"10px\">Right</Button>\n      <Button auto onClick={() => open('bottom')} scale={1/2} mr=\"10px\">Bottom</Button>\n      <Button auto onClick={() => open('left')} scale={1/2}>Left</Button>\n      <Drawer visible={state} onClose={() => setState(false)} placement={placement}>\n        <Drawer.Title>标题</Drawer.Title>\n        <Drawer.Subtitle>子标题</Drawer.Subtitle>\n        <Drawer.Content>\n          <p>Geist UI 是我最爱的组件库。</p>\n        </Drawer.Content>\n      </Drawer>\n    </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/drawer.mdx\">\n<Attributes.Title>Drawer.Props</Attributes.Title>\n\n| 属性                     | 描述                   | 类型                                | 推荐值                     | 默认    |\n| ------------------------ | ---------------------- | ----------------------------------- | -------------------------- | ------- |\n| **visible**              | 打开或关闭             | `boolean`                           | -                          | `false` |\n| **onClose**              | 关闭事件               | `() => void`                        | -                          | -       |\n| **onContentClick**       | 抽屉内部元素点击事件   | `(e: MouseEvent) => void`           | -                          | -       |\n| **wrapClassName**        | 抽屉弹出内容的类名     | `string`                            | -                          | -       |\n| **keyboard**             | 按下 Esc 键关闭元素    | `boolean`                           | -                          | `true`  |\n| **disableBackdropClick** | 点击背景层时不关闭抽屉 | `boolean`                           | -                          | `false` |\n| **placement**            | 抽屉相对于屏幕的位置   | [DrawerPlacement](#drawerplacement) | -                          | `right` |\n| ...                      | 原生属性               | `HTMLAttributes`                    | `'name', 'className', ...` | -       |\n\n<Attributes.Title>Drawer.Title.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Drawer.Subtitle.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Drawer.Content.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>DrawerPlacement</Attributes.Title>\n\n```ts\ntype DrawerPlacement = 'top' | 'bottom' | 'right' | 'left'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/fieldset.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Fieldset, Button, Text, Divider } from 'components'\n\nexport const meta = {\n  title: '控件组 Fieldset',\n  group: '表面',\n}\n\n## Fieldset / 控件组\n\n在一个集合内显示相关的信息。\n\n<Playground\n  desc=\"在 `Actions` 内可以添加自定义的按钮。\"\n  scope={{ Fieldset, Button }}\n  code={`\n<Fieldset>\n  <Fieldset.Title>层叠样式表 (Cascading Style Sheets，缩写为 CSS）</Fieldset.Title>\n  <Fieldset.Subtitle>CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。</Fieldset.Subtitle>\n  <Fieldset.Footer>\n    CSS3 分成多个小模块且正在标准化中。\n    <Button auto scale={1/3} font=\"12px\">学习 CSS</Button>\n  </Fieldset.Footer>\n</Fieldset>\n`}\n/>\n\n<Playground\n  title=\"定制文本\"\n  desc=\"在不同的场景下定制文本的色彩。\"\n  scope={{ Fieldset, Button, Text }}\n  code={`\n<Fieldset>\n  <Fieldset.Title>层叠样式表 (Cascading Style Sheets，缩写为 CSS）</Fieldset.Title>\n  <Fieldset.Subtitle>CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。</Fieldset.Subtitle>\n  <Fieldset.Footer>\n    <Text type=\"error\">视频教程部分暂不可用。</Text>\n    <Button auto scale={1/3} type=\"error\" font=\"12px\">知道了</Button>\n  </Fieldset.Footer>\n</Fieldset>\n`}\n/>\n\n<Playground\n  title=\"选项卡\"\n  desc=\"同时展示多个组件组。\"\n  scope={{ Fieldset, Button }}\n  code={`\n() => {\n  const handler = v => console.log(v)\n  return (\n    <Fieldset.Group value=\"HTML\" onChange={handler}>\n    <Fieldset label=\"CSS\">\n      <Fieldset.Title>层叠样式表 (Cascading Style Sheets，缩写为 CSS）</Fieldset.Title>\n      <Fieldset.Subtitle>CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。</Fieldset.Subtitle>\n      <Fieldset.Footer>\n        包含 20 个视频学习资料与 10 篇文章\n        <Button auto scale={1/3} font=\"12px\">了解更多</Button>\n      </Fieldset.Footer>\n    </Fieldset>\n    <Fieldset label=\"HTML\">\n      <Fieldset.Title>HTML（超文本标记语言——HyperText Markup Language）</Fieldset.Title>\n      <Fieldset.Subtitle>HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。</Fieldset.Subtitle>\n      <Fieldset.Footer>\n        包含 2 个视频学习资料与 1 篇文章\n        <Button auto scale={1/3} font=\"12px\">了解更多</Button>\n      </Fieldset.Footer>\n    </Fieldset>\n    <Fieldset label=\"JavaScript\">\n      <Fieldset.Title>JavaScript ( JS ) 是一种即时编译型的编程语言。</Fieldset.Title>\n      <Fieldset.Subtitle>虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中。</Fieldset.Subtitle>\n      <Fieldset.Footer>\n        包含 18 个视频学习资料与 3 篇文章\n        <Button auto scale={1/3} font=\"12px\">了解更多</Button>\n      </Fieldset.Footer>\n    </Fieldset>\n    </Fieldset.Group>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"组合分割线\"\n  desc=\"使用 `Fieldset.Content` 与其他组件组合成不同布局。\"\n  scope={{ Fieldset, Divider }}\n  code={`\n<Fieldset>\n  <Fieldset.Content style={{ paddingTop: '10pt', paddingBottom: '10pt' }}>\n    <h4>预备知识</h4>\n  </Fieldset.Content>\n  <Divider my={0} />\n  <Fieldset.Content>\n    <Fieldset.Title>若知道 HTML 和 CSS 的基本知识会对理解内容大有裨益。</Fieldset.Title>\n    <p>若想深入理解这个单元的内容, 你必须能够以自己的能力较好地学完之前的几个章节。\n    这几部分涉及到了许多简单的API的使用，如果没有它们我们将很难做一些实际的事情。</p>\n  </Fieldset.Content>\n  <Fieldset.Footer>\n    <small>客户端 Web API</small>\n  </Fieldset.Footer>\n</Fieldset>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/fieldset.mdx\">\n<Attributes.Title>Fieldset.Props</Attributes.Title>\n\n| 属性         | 描述                        | 类型                     | 推荐值                     | 默认 |\n| ------------ | --------------------------- | ------------------------ | -------------------------- | ---- |\n| **value**    | 唯一的鉴别值 (仅作用于组中) | `string`                 | -                          | -    |\n| **label**    | 选项卡的文本 (仅作用于组中) | `string`                 | -                          | -    |\n| **title**    | 控件组的标题                | `ReactNode` / `string`   | -                          | -    |\n| **subtitle** | 副标题                      | `ReactNode` / `string`   | -                          | -    |\n| ...          | 原生属性                    | `FieldsetHTMLAttributes` | `'name', 'className', ...` | -    |\n\n<Attributes.Title alias=\"Fieldset.Body\">Fieldset.Content.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值 | 默认 |\n| ---- | -------- | ---------------- | ------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | -      | -    |\n\n<Attributes.Title>Fieldset.Footer.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值 | 默认 |\n| ---- | -------- | ---------------- | ------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | -      | -    |\n\n<Attributes.Title>Fieldset.Group.Props</Attributes.Title>\n\n| 属性         | 描述           | 类型                      | 推荐值 | 默认 |\n| ------------ | -------------- | ------------------------- | ------ | ---- |\n| **value**    | 当前选中的值   | `string`                  | -      | -    |\n| **onChange** | 选项卡切换事件 | `(value: string) => void` | -      | -    |\n| ...          | 原生属性       | `HTMLAttributes`          | -      | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/file-tree.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tree, useToasts } from 'components'\n\nexport const meta = {\n  title: '文件树 File Tree',\n  group: '数据展示',\n}\n\n## File-Tree / 文件树\n\n使用树结构展示文件与文件夹列表。\n\n<Playground\n  title=\"Basic\"\n  desc=\"所有的文件和文件夹都会被自动排序以便于浏览。\"\n  scope={{ Tree }}\n  code={`\n<Tree>\n  <Tree.File name=\"package.json\" />\n  <Tree.Folder name=\"components\">\n    <Tree.File name=\"layout.js\" />\n    <Tree.Folder name=\"footer\">\n      <Tree.File name=\"footer.js\" />\n      <Tree.File name=\"footer-text.js\" />\n      <Tree.File name=\"footer-license.js\" />\n    </Tree.Folder>\n    <Tree.File name=\"header.js\" />\n  </Tree.Folder>\n  <Tree.File name=\"readme.md\" />\n</Tree>\n`}\n/>\n\n<Playground\n  title=\"命令式\"\n  desc=\"使用 `value` 属性渲染一组数据。\"\n  scope={{ Tree }}\n  code={`\n() => {\n  const files = [{\n    type: 'directory',\n    name: 'bin',\n    files: [{\n      type: 'file',\n      name: 'cs.js',\n    }],\n  }, {\n    type: 'directory',\n    name: 'docs',\n    files: [{\n      type: 'file',\n      name: 'controllers.md',\n    }, {\n      type: 'file',\n      name: 'es6.md',\n    }, {\n      type: 'file',\n      name: 'production.md',\n    }, {\n      type: 'file',\n      name: 'views.md',\n    }],\n  }]\n  return <Tree value={files} />\n}\n`}\n/>\n\n<Playground\n  title=\"额外信息\"\n  desc=\"在文件树中渲染额外的信息。\"\n  scope={{ Tree }}\n  code={`\n() => {\n  const files = [{\n    type: 'directory',\n    name: 'controllers',\n    extra: '1 file',\n    files: [{\n      type: 'file',\n      name: 'cs.js',\n      extra: '1kb',\n    }],\n  }, {\n    type: 'directory',\n    name: 'docs',\n    extra: '2 files',\n    files: [{\n      type: 'file',\n      name: 'controllers.md',\n      extra: '2.5kb',\n    }, {\n      type: 'file',\n      name: 'es6.md',\n      extra: '2.9kb',\n    }],\n  }, {\n     type: 'file',\n     name: 'production.md',\n     extra: '0.8kb',\n   }, {\n     type: 'file',\n     name: 'views.md',\n     extra: '8.1kb',\n   }]\n  return <Tree value={files} />\n}\n`}\n/>\n\n<Playground\n  title=\"事件\"\n  desc=\"当文件被点击时会报告层级与路径。\"\n  scope={{ Tree, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const handler = path => setToast({ text: path })\n  return (\n    <Tree onClick={handler}>\n      <Tree.Folder name=\"components\">\n        <Tree.File name=\"layout.js\" />\n        <Tree.File name=\"layout.js\" />\n        <Tree.Folder name=\"footer\">\n          <Tree.File name=\"footer.js\" />\n          <Tree.File name=\"footer-text.js\" />\n          <Tree.File name=\"footer-license.js\" />\n        </Tree.Folder>\n      </Tree.Folder>\n      <Tree.File name=\"package.json\" />\n      <Tree.File name=\"readme.md\" />\n    </Tree>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/file-tree.mdx\">\n<Attributes.Title>Tree.Props</Attributes.Title>\n\n| 属性              | 描述           | 类型                                         | 推荐值                            | 默认    |\n| ----------------- | -------------- | -------------------------------------------- | --------------------------------- | ------- |\n| **value**         | 文件的集合数据 | [Array<FileTreeValue\\>](#type-filetreevalue) | -                                 | -       |\n| **initialExpand** | 默认是否展开   | `boolean`                                    | -                                 | `false` |\n| **onClick**       | 文件点击事件   | `(path: string) => void`                     | -                                 | -       |\n| ...               | 原生属性       | `HTMLAttributes`                             | `'id', 'title', 'className', ...` | -       |\n\n<Attributes.Title>Tree.File.Props</Attributes.Title>\n\n| 属性             | 描述         | 类型             | 推荐值                            | 默认 |\n| ---------------- | ------------ | ---------------- | --------------------------------- | ---- |\n| **name**(必须的) | 文件名       | `string`         | -                                 | -    |\n| **extra**        | 额外文本信息 | `string`         | -                                 | -    |\n| ...              | 原生属性     | `HTMLAttributes` | `'id', 'title', 'className', ...` | -    |\n\n<Attributes.Title>Tree.Folder.Props</Attributes.Title>\n\n| 属性             | 描述           | 类型             | 推荐值                            | 默认 |\n| ---------------- | -------------- | ---------------- | --------------------------------- | ---- |\n| **name**(必须的) | 文件夹名       | `string`         | -                                 | -    |\n| **extra**        | 额外的文本信息 | `string`         | -                                 | -    |\n| ...              | 原生属性       | `HTMLAttributes` | `'id', 'title', 'className', ...` | -    |\n\n<Attributes.Title>type FileTreeValue</Attributes.Title>\n\n```ts\ntype FileTreeValue = {\n  type: 'directory' || 'file'\n  name: string\n  extra?: string\n  files?: Array<FileTreeValue>\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/grid.mdx",
    "content": "import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components'\nimport { Grid, Card } from 'components'\nimport PlaygroundTitle from 'lib/components/playground/title'\n\nexport const meta = {\n  title: '栅格 Grid',\n  group: '布局',\n}\n\n## Grid / 栅格\n\n强大的流体风格布局容器。\n\n`Grid` 组件使用 **动态 CSS 媒体查询** 实现响应式布局，同时具备超高的性能与极小的体积。\n当然，组件也支持动态属性与自定义断点。\n\n<Playground\n  desc=\"保持间距同时动态缩放容器宽度。\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\" height=\"100px\">\n  <Grid xs={6}><Card shadow width=\"100%\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"流体布局\"\n  desc=\"容器的自动换行与缩放。\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={24}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"响应式布局\"\n  desc=\"在不同屏幕宽度下自动使用不同布局方式。\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={24} md={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} md={6}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"隐藏元素\"\n  desc=\"当单位大小为 0 时会自动隐藏当前元素。\"\n  scope={{ Grid, Card }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={12} sm={0}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={12} sm={0}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={24}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  <Grid xs={24}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"自动宽度\"\n  desc=\"自动分配剩余宽度。\"\n  scope={{ Grid, Card }}\n  code={`\n<>\n  <Grid.Container gap={2} justify=\"center\">\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  </Grid.Container>\n  <Grid.Container gap={2} justify=\"center\">\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs={12}><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n    <Grid xs><Card shadow width=\"100%\" height=\"50px\" /></Grid>\n  </Grid.Container>\n</>\n`}\n/>\n\n<PlaygroundTitle\n  title=\"定制断点\"\n  desc=\"您可以覆盖 `@geist-ui/core` 组件库默认的断点值。\"\n/>\n\n```tsx\nconst breakpoints: GeistUIThemesBreakpoints = {\n  xs: { min: '0', max: '650px' },\n  sm: { min: '650px', max: '900px' },\n  md: { min: '900px', max: '1280px' },\n  lg: { min: '1280px', max: '1920px' },\n  xl: { min: '1920px', max: '10000px' },\n}\n\nconst App = () => {\n  const myTheme = Themes.createFromLight({\n    type: 'myTheme',\n    breakpoints,\n  })\n  return (\n    <GeistProvider themes={[myTheme]} themeType=\"myTheme\">\n      <CssBaseline />\n      <AppComponent />\n    </GeistProvider>\n  )\n}\n```\n\n<Attributes edit=\"/pages/zh-cn/components/grid.mdx\">\n<Attributes.Title>Grid.Props</Attributes.Title>\n\n| 属性             | 描述                                 | 类型             | 推荐值                        | 默认         |\n| ---------------- | ------------------------------------ | ---------------- | ----------------------------- | ------------ |\n| **justify**      | CSS 属性 \"justify-content\"           | `Justify`        | [Justify](#justify)           | `flex-start` |\n| **alignItems**   | CSS 属性 \"align-items\"               | `AlignItems`     | [AlignItems](#alignitems)     | `stretch`    |\n| **alignContent** | CSS 属性 \"align-content\"             | `AlignContent`   | [AlignContent](#aligncontent) | `flex-start` |\n| **direction**    | CSS 属性 \"flex-direction\"            | `Direction`      | [Direction](#direction)       | `flex-start` |\n| **xs**           | 栅格宽度，影响 `xs` 断点与更宽的屏幕 | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **sm**           | 栅格宽度，影响 `sm` 断点与更宽的屏幕 | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **md**           | 栅格宽度，影响 `md` 断点与更宽的屏幕 | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **lg**           | 栅格宽度，影响 `lg` 断点与更宽的屏幕 | `number`         | `0 - 24`, `boolean`           | `false`      |\n| **xl**           | 栅格宽度，影响 `xl` 断点与更宽的屏幕 | `number`         | `0 - 24`, `boolean`           | `false`      |\n| ...              | 原生属性                             | `HTMLAttributes` | `'id', 'className', ...`      | -            |\n\n<Attributes.Title>Grid.Container.Props</Attributes.Title>\n\n| 属性     | 描述                               | 类型               | 推荐值                    | 默认   |\n| -------- | ---------------------------------- | ------------------ | ------------------------- | ------ |\n| **gap**  | 子组件的间距                       | `number` / `float` | -                         | 0      |\n| **wrap** | CSS 属性 \"flex-wrap\"，指定换行方式 | `Wrap`             | [Wrap](#wrap)             | `wrap` |\n| ...      | 继承 Grid 的所有属性               | `Grid.Props`       | [Grid.Props](#grid.props) | -      |\n\n<Attributes.Title>Justify</Attributes.Title>\n\n```ts\ntype Justify =\n  | 'flex-start'\n  | 'center'\n  | 'flex-end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly'\n```\n\n<Attributes.Title>AlignItems</Attributes.Title>\n\n```ts\ntype AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'\n```\n\n<Attributes.Title>AlignContent</Attributes.Title>\n\n```ts\ntype AlignContent =\n  | 'stretch'\n  | 'center'\n  | 'flex-start'\n  | 'flex-end'\n  | 'space-between'\n  | 'space-around'\n```\n\n<Attributes.Title>Direction</Attributes.Title>\n\n```ts\ntype Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse'\n```\n\n<Attributes.Title>Wrap</Attributes.Title>\n\n```ts\ntype Wrap = 'nowrap' | 'wrap' | 'wrap-reverse'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/icons.mdx",
    "content": "import { Layout, Playground, Attributes, IconsGallery } from 'lib/components'\nimport Title from 'lib/components/playground/title'\nimport { Spacer, Tabs, Snippet } from 'components'\nimport Github from '@geist-ui/icons/github'\n\nexport const meta = {\n  title: '图标 Icons',\n  group: '通用',\n}\n\n## Icons / 图标\n\n显示 SVG 格式的标准向量图形。\n\n<Title title=\"安装\" desc=\"安装图标库到你的项目中。\" />\n<Tabs initialValue=\"yarn\">\n  <Tabs.Item label=\"Yarn\" value=\"yarn\">\n    <Spacer h={0.6} />\n    <Snippet width=\"400px\">yarn add @geist-ui/icons</Snippet>\n  </Tabs.Item>\n  <Tabs.Item label=\"npm\" value=\"npm\">\n    <Spacer h={0.6} />\n    <Snippet width=\"400px\">npm i @geist-ui/icons</Snippet>\n  </Tabs.Item>\n</Tabs>\n\n<Playground\n  title=\"引入图标库\"\n  scope={{ Github, Spacer }}\n  code={`\n// import * as Icon from '@geist-ui/icons'\n// 或是\n// import { Github } from '@geist-ui/icons'\n// 或是引入单个\n// import Github from '@geist-ui/icons/github'\n\n<Github />\n`} />\n\n<Playground\n  title=\"色彩\"\n  scope={{ Github }}\n  code={`\n<Github color=\"red\" />\n`}\n/>\n\n<Playground\n  title=\"大小\"\n  scope={{ Github, Spacer }}\n  code={`\n<>\n  <Github size={16} /> <Spacer inline x={.35} />\n  <Github size={20} /> <Spacer inline x={.35} />\n  <Github size={24} /> <Spacer inline x={.35} />\n  <Github size={28} /> <Spacer inline x={.35} />\n  <Github size={32} /> <Spacer inline x={.35} />\n  <Github size={36} />\n</>\n`}\n/>\n\n<IconsGallery />\n\n<Attributes edit=\"/pages/zh-cn/components/icons.mdx\">\n<Attributes.Title>Icon.Props</Attributes.Title>\n\n| 属性      | 描述     | 类型            | 推荐值                           | 默认 |\n| --------- | -------- | --------------- | -------------------------------- | ---- |\n| **color** | 图标颜色 | `string`        | -                                | -    |\n| **size**  | 图标大小 | `number`        | -                                | -    |\n| ...       | 原生属性 | `SVGAttributes` | `'id', 'name', 'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/image.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Image, Display, Code } from 'components'\n\nexport const meta = {\n  title: '图片 Image',\n  group: '数据展示',\n}\n\n## Image / 图片\n\n展示图片内容。\n\n<Playground\n  scope={{ Image }}\n  code={`\n<Image width=\"280px\" height=\"160px\" src=\"/images/geist-banner.png\" />\n`}\n/>\n\n<Playground\n  title=\"骨架\"\n  desc=\"组件在设置 `width` 与 `height` 属性后会在加载时显示骨架动画。\"\n  scope={{ Image }}\n  code={`\n<Image width=\"280px\" height=\"160px\"\n  src=\"http://www.deelay.me/2000/https://geist-ui.dev/images/geist-banner.png\" />\n`}\n/>\n\n<Playground\n  title=\"浏览器风格\"\n  desc=\"为图片增加浏览器风格的外装饰。\"\n  scope={{ Image, Display, Code }}\n  code={`\n<Image.Browser url=\"https://geist-ui.dev/zh-cn/guide/introduction\" >\n  <Image width=\"525px\" height=\"300px\" src=\"/images/geist-banner.png\" />\n</Image.Browser>\n`}\n/>\n\n<Playground\n  title=\"反转的浏览器风格\"\n  scope={{ Image, Display, Code }}\n  code={`\n<Image.Browser url=\"https://geist-ui.dev/zh-cn/guide/introduction\" invert>\n  <Image width=\"525px\" height=\"300px\" src=\"/images/geist-banner-dark.png\" />\n</Image.Browser>\n`}\n/>\n\n<Playground\n  title=\"组合\"\n  desc=\"与 `Display` 组件组合使用。\"\n  scope={{ Image, Display, Code }}\n  code={`\n<Display shadow caption={<p>设置 <Code>height</Code> 属性可以尽可能的减少重绘。</p>}>\n  <Image height=\"246px\" src=\"/images/geist-banner-text.png\" />\n</Display>\n`}\n/>\n\n<Playground\n  title=\"SVG\"\n  desc=\"直接渲染 SVG 字符串\"\n  scope={{ Image }}\n  code={`\n() => {\n  const svg = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15px\" height=\"15px\" viewBox=\"0 0 15 15\" fill=\"none\">\n      <path d=\"M12.5 8V7.83333C12.5 7.09695 11.903 6.5 11.1667 6.5H10C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11C11.8284 9.5 12.5 10.1716 12.5 11C12.5 11.8284 11.8284 12.5 11 12.5H10C9.17157 12.5 8.5 11.8284 8.5 11M8 6.5H3M5.5 6.5V13M0.5 0.5H14.5V14.5H0.5V0.5Z\" stroke=\"black\"/></svg>\\`\n  return <Image width=\"100px\" height=\"50px\" src={svg} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/image.mdx\">\n<Attributes.Title>Image.Props</Attributes.Title>\n\n| 属性                  | 描述                                | 类型                | 推荐值                    | 默认    |\n| --------------------- | ----------------------------------- | ------------------- | ------------------------- | ------- |\n| **src**               | 图片地址                            | `string`            | -                         | -       |\n| **disableSkeleton**   | 禁用加载时的骨架动画                | `boolean`           | -                         | `false` |\n| **disableAutoResize** | 禁用等比缩放图片 (当小于指定宽度时) | `boolean`           | -                         | `false` |\n| **maxDelay**          | 动画持续最大时间 (毫秒)             | `number`            | -                         | `3000`  |\n| ...                   | 原生属性                            | `ImgHTMLAttributes` | `'alt', 'className', ...` | -       |\n\n<Attributes.Title>Image.Browser.Props</Attributes.Title>\n\n| 属性             | 描述                             | 类型                   | 推荐值                   | 默认    |\n| ---------------- | -------------------------------- | ---------------------- | ------------------------ | ------- |\n| **title**        | 显示标题 (当 \"url\" 未设置时生效) | `string`               | -                        | -       |\n| **url**          | 在浏览器地址栏显示链接           | `string`               | -                        | -       |\n| **showFullLink** | 显示完整的链接而非域名           | `boolean`              | -                        | `false` |\n| **invert**       | 反转所有颜色                     | `boolean`              | -                        | `false` |\n| **anchorProps**  | 设置 `a` 的其他属性              | `AnchorHTMLAttributes` | -                        | `{}`    |\n| ...              | 原生属性                         | `HTMLAttributes`       | `'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/index.js",
    "content": "import redirect from 'lib/redirect'\n\nexport default redirect('/zh-cn/components/text')\n"
  },
  {
    "path": "pages/zh-cn/components/input.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport GitIcon from '@geist-ui/icons/github'\nimport { Input, Spacer, Button, Code, Text, Dot } from 'components'\n\nexport const meta = {\n  title: '输入框 Input',\n  group: '数据录入',\n}\n\n## Input / 输入框\n\n处理用户的输入数据。\n\n输入框组件包含额外的 Hooks，详情请参阅 [useInput](/zh-cn/hooks/use-input) 小节。\n\n<Playground\n  desc=\"基础的输入字段。\"\n  scope={{ Input }}\n  code={`\n<Input placeholder=\"一个基础示例\" />\n`}\n/>\n\n<Playground\n  title=\"大小\"\n  desc=\"不同大小的输入框。\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input scale={1/3} placeholder=\"Scale 1/3\" /> <Spacer h={.5} />\n  <Input scale={2/3} placeholder=\"Scale 2/3\" /> <Spacer h={.5} />\n  <Input placeholder=\"Scale 1\" /> <Spacer h={.5} />\n  <Input scale={4/3} placeholder=\"Scale 4/3\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"宽度\"\n  desc=\"手动地设置宽度，或其他样式。\"\n  scope={{ Input }}\n  code={`\n<Input placeholder=\"一个基础示例\" width=\"100%\" />\n`}\n/>\n\n<Playground\n  title=\"不可交互地\"\n  desc=\"禁用输入框地所有交互效果。\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input disabled placeholder=\"禁用\" />\n  <Spacer h={.5} />\n  <Input readOnly initialValue=\"只读\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"行内标签\"\n  desc=\"在输入框内显示短小地行内文本。\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input label=\"用户名\" placeholder=\"一个基础示例\" />\n  <Spacer h={.5} />\n  <Input labelRight=\".com\" placeholder=\"https://github\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"块级标签\"\n  desc=\"为标签自定义更多样式。\"\n  scope={{ Input, Spacer, Text, Code, Dot }}\n  code={`\n<>\n  <Input placeholder=\"小维特\">\n    用户名\n  </Input>\n  <Spacer />\n  <Input placeholder=\"文章标题\" width=\"50%\">\n    <Text h3>标题</Text>\n  </Input>\n  <Spacer />\n  <Input placeholder=\"GitHub Actions\" width=\"50%\">\n    <Dot type=\"warning\">\n      <Text small><Code>部署</Code> 问题详情</Text>\n    </Dot>\n  </Input>\n</>\n`}\n/>\n\n<Playground\n  title=\"状态\"\n  desc=\"用色彩区分不同的状态。\"\n  scope={{ Input, Spacer }}\n  code={`\n<>\n  <Input type=\"secondary\" initialValue=\"次要\" />\n  <Spacer h={.5} />\n  <Input type=\"success\" initialValue=\"成功\" />\n  <Spacer h={.5} />\n  <Input type=\"warning\" initialValue=\"警告\" />\n  <Spacer h={.5} />\n  <Input type=\"error\" initialValue=\"包含错误\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"图标\"\n  desc=\"指定一个图标组件。\"\n  scope={{ Input, GitIcon, Spacer }}\n  code={`\n<>\n  <Input icon={<GitIcon />} placeholder=\"输入 Git 地址\" />\n  <Spacer h={.5} />\n  <Input iconRight={<GitIcon />} placeholder=\"输入 Git 地址\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"密码\"\n  desc=\"显示或隐藏密码文本。\"\n  scope={{ Input }}\n  code={`\n<Input.Password initialValue=\"123456abc\" />\n`}\n/>\n\n<Playground\n  title=\"清除按钮\"\n  desc=\"在输入框内增加一个用于清除文本的按钮。\"\n  scope={{ Input }}\n  code={`\n<>\n  <Input clearable initialValue=\"示例文字\" placeholder=\"输入文本\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"变化事件\"\n  desc=\"捕获输入框的文本变化。\"\n  scope={{ Input }}\n  code={`\n() => {\n  const [value, setValue] = React.useState()\n  const handler = (e) => {\n    setValue(e.target.value)\n    console.log(e.target.value)\n  }\n  return (\n    <Input value={value} onChange={handler} placeholder=\"一个基础示例\" />\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"命令式 API\"\n  desc=\"使用非受控方式更新组件。\"\n  scope={{ Input, Spacer, Button }}\n  code={`\n() => {\n  const ref = React.useRef(null)\n  const setChange = () => {\n    ref && (ref.current.value = Math.random().toString(32))\n  }\n  return (\n    <>\n      <Input initialValue=\"Hello\" onChange={e => console.log(e.target.value)} ref={ref} />\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/3} onClick={setChange}>设置值</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/input.mdx\">\n<Attributes.Title>Input.Props</Attributes.Title>\n\n| 属性              | 描述                  | 类型                                           | 推荐值                    | 默认      |\n| ----------------- | --------------------- | ---------------------------------------------- | ------------------------- | --------- |\n| **value**         | 命令式设定输入框的值  | `string`                                       | -                         | -         |\n| **initialValue**  | 初始值                | `string`                                       | -                         | -         |\n| **placeholder**   | 占位文本              | `string`                                       | -                         | -         |\n| **type**          | 输入框状态            | `InputTypes`                                   | [InputTypes](#inputtypes) | `default` |\n| **htmlType**      | 原生 HTML `type` 属性 | `string`                                       | -                         | `text`    |\n| **readOnly**      | 是否设置输入框为只读  | `boolean`                                      | -                         | `false`   |\n| **disabled**      | 是否禁用输入框        | `boolean`                                      | -                         | `false`   |\n| **clearable**     | 是否展示清除按钮      | `boolean`                                      | -                         | `false`   |\n| **label**         | 文本标签              | `string`                                       | -                         | -         |\n| **icon**          | 输入框图标            | `React.ReactNode`                              | -                         | -         |\n| **labelRight**    | 居于右侧的文本标签    | `string`                                       | -                         | -         |\n| **iconRight**     | 居于右侧的图标        | `React.ReactNode`                              | -                         | -         |\n| **iconClickable** | 图标是否可点击        | `boolean`                                      | -                         | `false`   |\n| **onIconClick**   | 图标点击事件          | `(e: React.ChangeEvent) => void`               | -                         | -         |\n| **onChange**      | 输入框变化事件        | `(e: React.ChangeEvent) => void`               | -                         | -         |\n| **onClearClick**  | 清除按钮的点击事件    | `(e: React.MouseEvent) => void`                | -                         | -         |\n| **ref**           | 转发的原生输入框 Ref  | <Code>Ref<HTMLInputElement &#124; null></Code> | -                         | -         |\n| ...               | 原生属性              | `InputHTMLAttributes`                          | `'id', 'className', ...`  | -         |\n\n<Attributes.Title>Input.Password.Props</Attributes.Title>\n\n| 属性           | 描述               | 类型          | 推荐值                      | 默认    |\n| -------------- | ------------------ | ------------- | --------------------------- | ------- |\n| **hideToggle** | 隐藏切换密码的按钮 | `boolean`     | -                           | `false` |\n| ...            | 输入框组件属性     | `Input.Props` | [Input.Props](#input.props) | -       |\n\n<Attributes.Title>InputTypes</Attributes.Title>\n\n```ts\ntype InputTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/keyboard.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Keyboard } from 'components'\n\nexport const meta = {\n  title: '键盘 keyboard',\n  group: '数据展示',\n}\n\n## Keyboard / 键盘\n\n显示用于键盘输入的按键字符。\n\n组件 `Keyboard` 只用于展示布局样式，如需绑定按键事件，请阅读 [useKeyboard](/zh-cn/hooks/use-keyboard)。\n\n<Playground\n  scope={{ Keyboard }}\n  code={`\n<Keyboard>f</Keyboard>\n`}\n/>\n\n<Playground\n  title=\"修饰符\"\n  scope={{ Keyboard }}\n  code={`\n<div>\n  <Keyboard command mr=\"10px\" />\n  <Keyboard shift mr=\"10px\" />\n  <Keyboard option mr=\"10px\" />\n  <Keyboard ctrl mr=\"10px\" />\n</div>\n`}\n/>\n\n<Playground\n  title=\"组合键\"\n  scope={{ Keyboard }}\n  code={`\n<div>\n  <Keyboard command mr=\"10px\">f</Keyboard>\n  <Keyboard shift mr=\"10px\">e</Keyboard>\n  <Keyboard option ctrl mr=\"10px\">b</Keyboard>\n</div>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/keyboard.mdx\">\n<Attributes.Title>Keyboard.Props</Attributes.Title>\n\n| 属性        | 描述              | 类型                   | 推荐值                        | 默认    |\n| ----------- | ----------------- | ---------------------- | ----------------------------- | ------- |\n| **command** | 显示 Command 按钮 | `boolean`              | -                             | `false` |\n| **shift**   | 显示 Shift 按钮   | `boolean`              | -                             | `false` |\n| **option**  | 显示 Option 按钮  | `boolean`              | -                             | `false` |\n| **ctrl**    | 显示 Control 按钮 | `boolean`              | -                             | `false` |\n| ...         | 原生属性          | `KeygenHTMLAttributes` | `'keyType', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/link.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Link, Text, Code, Spacer } from 'components'\nimport NextLink from 'next/link'\n\nexport const meta = {\n  title: '链接 Link',\n  group: '导航',\n}\n\n## Link / 链接\n\n网页之间的超链接。\n\n<Playground\n  desc=\"组件默认会为链接添加一个图标。\"\n  scope={{ Link }}\n  code={`\n<Link href=\"#\">通过使用指南和教程来学习如何用 React</Link>\n`}\n/>\n\n<Playground\n  title=\"高亮\"\n  desc=\"以不同的颜色区分链接。\"\n  scope={{ Link }}\n  code={`\n<Link href=\"#\" color>通过使用指南和教程来学习如何用 React</Link>\n`}\n/>\n\n<Playground\n  title=\"变体\"\n  desc=\"链接的不同样式。\"\n  scope={{ Link, Text }}\n  code={`\n<>\n  <Text><Link href=\"#\">严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>\n  <Text><Link href=\"#\" color>严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>\n  <Text><Link href=\"#\" underline>通过使用指南和教程来学习如何用 React</Link></Text>\n  <Text><Link href=\"#\" color underline>通过使用指南和教程来学习如何用 React</Link></Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"图标\"\n  desc=\"在链接中显示修饰图标。\"\n  scope={{ Link, Spacer }}\n  code={`\n<>\n  <Link href=\"#\" icon>通过使用指南和教程来学习如何用 React</Link>\n  <Spacer h={.5} />\n  <Link href=\"#\" icon color>通过使用指南和教程来学习如何用 React</Link>\n</>\n`}\n/>\n\n<Playground\n  title=\"块级链接\"\n  desc=\"将链接单独作为一个块显示。\"\n  scope={{ Link }}\n  code={`\n<Link href=\"#\" block>请参阅转换成严格模式</Link>\n`}\n/>\n\n<Playground\n  title={\n    <>\n      与&nbsp;<Code>next/link</Code>&nbsp;组合\n    </>\n  }\n  desc=\"使用 `Link` 组件与 NextJS 组合使用不需要任何额外的配置。\"\n  scope={{ Link, NextLink }}\n  code={`\n<NextLink href=\"/zh-cn/components/button\">\n  <Link block>浏览更多文档</Link>\n</NextLink>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/link.mdx\">\n<Attributes.Title>Link.Props</Attributes.Title>\n\n| 属性          | 描述                   | 类型                                            | 推荐值                 | 默认    |\n| ------------- | ---------------------- | ----------------------------------------------- | ---------------------- | ------- |\n| **href**      | 链接地址               | `string`                                        | -                      | -       |\n| **color**     | 是否高亮显示           | `boolean`                                       | -                      | `false` |\n| **icon**      | 在文本后显示图标       | `boolean`                                       | -                      | `false` |\n| **underline** | 显示下划线             | `boolean`                                       | -                      | `false` |\n| **block**     | 是否以块的方式显示链接 | `boolean`                                       | -                      | `false` |\n| **ref**       | 转发的原生链接 Ref     | <Code>Ref<HTMLAnchorElement &#124; null></Code> | -                      | -       |\n| ...           | 原生属性               | `AnchorHTMLAttributes`                          | `'rel', 'target', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/loading.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Loading, Grid } from 'components'\n\nexport const meta = {\n  title: '加载中 Loading',\n  group: '反馈',\n}\n\n## Loading / 加载中\n\n表示动作正在后台运行。\n\n<Playground\n  scope={{ Loading }}\n  code={`\n<Loading />\n`}\n/>\n\n<Playground\n  title=\"文本\"\n  desc=\"在图标旁边定制一段文本。\"\n  scope={{ Loading }}\n  code={`\n<Loading>加载中</Loading>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"加载指示器在不同状态下的表现。\"\n  scope={{ Loading, Grid }}\n  code={`\n<Grid.Container gap={2.5}>\n  <Grid xs={24}>\n    <Loading type=\"success\" />\n  </Grid>\n  <Grid xs={24}>\n    <Loading type=\"secondary\" />\n  </Grid>\n  <Grid xs={24}>\n    <Loading type=\"warning\" />\n  </Grid>\n   <Grid xs={24}>\n    <Loading type=\"error\" />\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"空间\"\n  desc=\"自定义点与点之间的间隔比例。(比例是相对于当前大小 `size`)\"\n  scope={{ Loading, Grid }}\n  code={`\n<Grid.Container gap={2.5}>\n  <Grid xs={24}>\n    <Loading spaceRatio={2.5} />\n  </Grid>\n  <Grid xs={24}>\n    <Loading spaceRatio={0.5} />\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/loading.mdx\">\n<Attributes.Title>Loading.Props</Attributes.Title>\n\n| 属性           | 描述               | 类型             | 推荐值                            | 默认      |\n| -------------- | ------------------ | ---------------- | --------------------------------- | --------- |\n| **type**       | 指示器的类型       | `LoadingTypes`   | [LoadingTypes](#loadingtypes)     | `default` |\n| **color**      | 自定义指示器的色彩 | `string`         | -                                 | -         |\n| **spaceRatio** | 点之间的空间比例   | `number`         | -                                 | 1         |\n| ...            | 原生属性           | `HTMLAttributes` | `'id', 'title', 'className', ...` | -         |\n\n<Attributes.Title>LoadingTypes</Attributes.Title>\n\n```ts\ntype LoadingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/modal.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Modal, Button, Code, useModal } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: '对话框 Modal',\n  group: '反馈',\n}\n\n## Modal / 对话框\n\n弹出显示需要额外注意或重要的内容。如果你仅需要提示文本信息，请考虑 [Toast](/zh-cn/components/toast) 组件。\n\n对话框组件包含额外的 Hooks，详情请参阅 [useModal](/zh-cn/hooks/use-modal) 小节。\n\n<Playground\n  desc=\"使用 `visible` 属性控制何时显示对话框。\"\n  scope={{ Modal, Button, useState, Code }}\n  code={`\n() => {\n  const [state, setState] = useState(false)\n  const handler = () => setState(true)\n  const closeHandler = (event) => {\n    setState(false)\n    console.log('closed')\n  }\n  return (\n    <div>\n      <Button auto onClick={handler}>显示对话框</Button>\n      <Modal visible={state} onClose={closeHandler}>\n        <Modal.Title>箭头函数</Modal.Title>\n        <Modal.Subtitle>它不能用作构造函数</Modal.Subtitle>\n        <Modal.Content>\n          <p> <Code>yield</Code> 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={({ close }) => close()}>放弃使用</Modal.Action>\n        <Modal.Action onClick={({ close }) => close()}>明白了</Modal.Action>\n      </Modal>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"无按钮\"\n  desc=\"隐藏指定的按钮。\"\n  scope={{ Modal, Button, useState, Code }}\n  code={`\n() => {\n  const [state, setState] = useState(false)\n  const handler = () => setState(true)\n  const closeHandler = (event) => {\n    setState(false)\n    console.log('closed')\n  }\n  return (\n    <div>\n      <Button auto onClick={handler}>显示对话框</Button>\n      <Modal visible={state} onClose={closeHandler}>\n        <Modal.Title>箭头函数</Modal.Title>\n        <Modal.Subtitle>它不能用作构造函数</Modal.Subtitle>\n        <Modal.Content>\n          <p> <Code>yield</Code> 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。</p>\n        </Modal.Content>\n      </Modal>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"禁用按钮\"\n  desc=\"禁用指定的按钮。\"\n  scope={{ Modal, Button, useState, Code }}\n  code={`\n() => {\n  const [state, setState] = useState(false)\n  const handler = () => setState(true)\n  const closeHandler = (event) => {\n    setState(false)\n    console.log('closed')\n  }\n  return (\n    <>\n      <Button auto onClick={handler}>Show Modal</Button>\n      <Modal visible={state} onClose={closeHandler}>\n        <Modal.Title>箭头函数</Modal.Title>\n        <Modal.Subtitle>它不能用作构造函数</Modal.Subtitle>\n        <Modal.Content>\n          <p> <Code>yield</Code> 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={({ close }) => close()}>继续学习</Modal.Action>\n        <Modal.Action disabled onClick={close => close()}>尝试箭头函数</Modal.Action>\n      </Modal>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"定制化\"\n  desc=\"自定义 `width` 或是 `className`。\"\n  scope={{ Modal, Button, useModal }}\n  code={`\n() => {\n  const { setVisible, bindings } = useModal()\n  return (\n    <div>\n      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>\n      <Modal width=\"35rem\" {...bindings}>\n        <Modal.Title>我的最爱</Modal.Title>\n        <Modal.Content>\n          <p>酷，这才是我想要的宽度。</p>\n        </Modal.Content>\n      </Modal>\n    </div>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"加载中\"\n  scope={{ Modal, Button, useModal, Code }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n  return (\n    <>\n      <Button auto onClick={() => setVisible(true)}>Show Modal</Button>\n      <Modal {...bindings}>\n        <Modal.Title>箭头函数</Modal.Title>\n        <Modal.Subtitle>它不能用作构造函数</Modal.Subtitle>\n        <Modal.Content>\n          <p> <Code>yield</Code> 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setVisible(false)}>取消</Modal.Action>\n        <Modal.Action loading>提交</Modal.Action>\n      </Modal>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/modal.mdx\">\n<Attributes.Title>Modal.Props</Attributes.Title>\n\n| 属性                     | 描述                       | 类型                      | 推荐值                                  | 默认    |\n| ------------------------ | -------------------------- | ------------------------- | --------------------------------------- | ------- |\n| **visible**              | 打开或关闭对话框           | `boolean`                 | -                                       | `false` |\n| **onClose**              | 关闭的事件                 | `() => void`              | -                                       | -       |\n| **onContentClick**       | 对话框内部点击事件         | `(e: MouseEvent) => void` | -                                       | -       |\n| **wrapClassName**        | 对话框的自定义样式类名     | `string`                  | -                                       | -       |\n| **keyboard**             | 按下 Esc 键关闭对话框      | `boolean`                 | -                                       | `true`  |\n| **disableBackdropClick** | 点击背景层时是否关闭对话框 | `boolean`                 | -                                       | `false` |\n| ...                      | 原生属性                   | `HTMLAttributes`          | `'autoFocus', 'name', 'className', ...` | -       |\n\n<Attributes.Title>Modal.Title.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Modal.Subtitle.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Modal.Content.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Modal.Action.Props</Attributes.Title>\n\n| 属性         | 描述                 | 类型                                                   | 推荐值                   | 默认    |\n| ------------ | -------------------- | ------------------------------------------------------ | ------------------------ | ------- |\n| **passive**  | 以消极的状态显示按钮 | `boolean`                                              | -                        | `false` |\n| **disabled** | 禁用按钮             | `boolean`                                              | -                        | `false` |\n| **onClick**  | 按钮的点击事件       | [(event: ModalActionEvent) => void](#modalactionevent) | -                        | -       |\n| **loading**  | 显示加载状态指示器   | `boolean`                                              | -                        | `false` |\n| ...          | 原生属性             | `ButtonHTMLAttributes`                                 | `'id', 'className', ...` | -       |\n\n<Attributes.Title>useModal</Attributes.Title>\n\n```ts\ntype useModal = (initialVisible: boolean) => {\n  visible: boolean\n  setVisible: Dispatch<SetStateAction<boolean>>\n  currentRef: MutableRefObject<boolean>\n  bindings: {\n    visible: boolean\n    onClose: () => void\n  }\n}\n```\n\n<Attributes.Title>ModalActionEvent</Attributes.Title>\n\n```ts\ntype ModalActionEvent = MouseEvent<HTMLButtonElement> & {\n  close: () => void\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/note.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Note, Code } from 'components'\n\nexport const meta = {\n  title: '提示 Note',\n  group: '反馈',\n}\n\n## Note / 提示\n\n显示一段用于提示的额外文本信息。\n\n<Playground\n  desc=\"显示文本信息或是组件内容。\"\n  scope={{ Note, Code }}\n  code={`\n<Note><Code>caller</Code> 和 <Code>arguments</Code> 属性已经废弃，因为它们会泄漏调用函数的对象。</Note>\n`}\n/>\n\n<Playground\n  title=\"次要的\"\n  scope={{ Note }}\n  code={`\n<Note type=\"secondary\">表达式闭包已被废弃。请用普通函数或箭头函数代替它。</Note>\n`}\n/>\n\n<Playground\n  title=\"状态\"\n  scope={{ Note }}\n  code={`\n<>\n  <Note type=\"success\">表达式闭包已被废弃。请用普通函数或箭头函数代替它。</Note>\n  <br/>\n  <Note type=\"warning\">表达式闭包已被废弃。请用普通函数或箭头函数代替它。</Note>\n  <br/>\n  <Note type=\"error\">表达式闭包已被废弃。请用普通函数或箭头函数代替它。</Note>\n</>\n`}\n/>\n\n<Playground\n  title=\"隐藏标签\"\n  scope={{ Note }}\n  code={`\n<Note label={false}>这些过时的特性已经完全被删除。</Note>\n`}\n/>\n\n<Playground\n  title=\"定制标签\"\n  scope={{ Note }}\n  code={`\n<Note label=\"重要信息\">let 区块和 let 表达式已被废弃。</Note>\n`}\n/>\n\n<Playground\n  title=\"变体\"\n  scope={{ Note }}\n  code={`\n<>\n  <Note label=\"注意\" filled>这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎。</Note>\n  <br/>\n  <Note label={false} filled>这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎</Note>\n  <br/>\n  <Note type=\"success\" label=\"success\" filled>这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎</Note>\n  <br/>\n  <Note type=\"warning\" label=\"warning\" filled>这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎</Note>\n  <br/>\n  <Note type=\"error\" label=\"error\" filled>这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎</Note>\n  <br/>\n  <Note type=\"secondary\" filled>这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎</Note>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/note.mdx\">\n<Attributes.Title>Note.Props</Attributes.Title>\n\n| 属性       | 描述                         | 类型               | 推荐值                   | 默认      |\n| ---------- | ---------------------------- | ------------------ | ------------------------ | --------- |\n| **type**   | 提示类型                     | `NoteTypes`        | [NoteTypes](#nodetypes)  | `default` |\n| **label**  | 是否显示标签，或是自定义标签 | `boolean / string` | -                        | -         |\n| **filled** | 填充色彩的变体提示框         | `boolean`          | -                        | `false`   |\n| ...        | 原生属性                     | `HTMLAttributes`   | `'id', 'className', ...` | -         |\n\n<Attributes.Title>NoteTypes</Attributes.Title>\n\n```ts\ntype NoteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/page.mdx",
    "content": "import { Page, Button } from 'components'\nimport { Layout, Playground, Attributes, MockPage } from 'lib/components'\n\nexport const meta = {\n  title: '页面 Page',\n  group: '布局',\n}\n\n## Page / 页面\n\n展示页面内容的通用容器。\n\n<Playground\n  desc=\"内容将会被展示在页面中间。\"\n  scope={{ Page, MockPage, Button }}\n  code={`\n() => {\n  const Child = () => (\n    <>\n      <h2>你好，世界。</h2>\n      <p>这是一个模拟页面，点击任意处即可关闭。</p>\n    </>\n  )\n  const [visible, setVisible] = React.useState(false)\n  return (\n    <>\n      <Button onClick={() => setVisible(true)} auto>显示页面</Button>\n      <MockPage visible={visible} onClose={() => setVisible(false)}>\n        <Page><Child /></Page>\n      </MockPage>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"内容块\"\n  desc=\"添加 `Header` 和 `Footer` 得到更好的布局效果。\"\n  scope={{ Page, MockPage, Button }}\n  code={`\n() => {\n  const [visible, setVisible] = React.useState(false)\n  return (\n    <>\n      <Button onClick={() => setVisible(true)} auto>头部和尾部</Button>\n      <MockPage visible={visible} onClose={() => setVisible(false)}>\n        <Page>\n          <Page.Header>\n            <h2>头部</h2>\n          </Page.Header>\n          <Page.Content>\n            <h2>你好，世界。</h2>\n            <p>这是一个模拟页面，点击任意处即可关闭。</p>\n          </Page.Content>\n          <Page.Footer>\n            <h2>尾部</h2>\n          </Page.Footer>\n        </Page>\n      </MockPage>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/page.mdx\">\n<Attributes.Title>Page.Props</Attributes.Title>\n\n| 属性            | 描述                 | 类型                              | 推荐值                                  | 默认      |\n| --------------- | -------------------- | --------------------------------- | --------------------------------------- | --------- |\n| **render**      | 渲染方式             | [PageRenderMode](#pagerendermode) | -                                       | `default` |\n| **dotBackdrop** | 在背景中显示装饰样式 | `boolean`                         | -                                       | `false`   |\n| **dotSize** | 背景中的点大小 | `CSSProperties`                         | -                        | `1px`   |\n| **dotSpace** | 背景中每个点的间距 | `number`                         | -                        | `1`   |\n| ...             | 原生属性             | `HTMLAttributes`                  | `'autoFocus', 'name', 'className', ...` | -         |\n\n<Attributes.Title>Page.Header.Props</Attributes.Title>\n\n| 属性       | 描述         | 类型             | 推荐值                                  | 默认    |\n| ---------- | ------------ | ---------------- | --------------------------------------- | ------- |\n| **center** | 居中对齐内容 | `boolean`        | -                                       | `false` |\n| ...        | 原生属性     | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | -       |\n\n<Attributes.Title alias=\"Page.Body\">Page.Content.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                                  | 默认 |\n| ---- | -------- | ---------------- | --------------------------------------- | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | -    |\n\n<Attributes.Title>Page.Footer.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                                  | 默认 |\n| ---- | -------- | ---------------- | --------------------------------------- | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | -    |\n\n<Attributes.Title>PageRenderMode</Attributes.Title>\n\n```ts\ntype PageRenderMode =\n  | 'default' // 正常渲染\n  | 'effect' // 在 effect 第一次触发后渲染\n  | 'effect-seo' // 类似于 \"effect\"，但首屏为 SEO 额外返回字符串\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/pagination.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Pagination, Spacer } from 'components'\nimport ChevronRight from '@geist-ui/icons/chevronRight'\nimport ChevronLeft from '@geist-ui/icons/chevronLeft'\nimport ChevronRightCircle from '@geist-ui/icons/chevronRightCircle'\nimport ChevronLeftCircle from '@geist-ui/icons/chevronLeftCircle'\nimport ChevronRightCircleFill from '@geist-ui/icons/chevronRightCircleFill'\nimport ChevronLeftCircleFill from '@geist-ui/icons/chevronLeftCircleFill'\n\nexport const meta = {\n  title: '分页 Pagination',\n  group: '导航',\n}\n\n## Pagination / 分页\n\n多个页面之间的导航与鉴别。\n\n<Playground\n  scope={{ Pagination }}\n  desc=\"默认的分页会自动收缩与扩展。\"\n  code={`\n<Pagination count={20} initialPage={3} />\n`}\n/>\n\n<Playground\n  title=\"Limit\"\n  desc=\"调整最大可展示页面数。\"\n  scope={{ Pagination }}\n  code={`\n<>\n  <Pagination count={10} limit={10} />\n  <Pagination count={5} />\n  <Pagination count={10} initialPage={6} limit={5} />\n  <Pagination count={10} initialPage={6} />\n  <Pagination count={30} initialPage={6} limit={10} />\n</>\n`}\n/>\n\n<Playground\n  title=\"Icon\"\n  desc=\"用图标定制按钮。\"\n  scope={{\n    Spacer,\n    Pagination,\n    ChevronRight,\n    ChevronLeft,\n    ChevronRightCircle,\n    ChevronLeftCircle,\n    ChevronRightCircleFill,\n    ChevronLeftCircleFill,\n  }}\n  code={`\n<>\n  <Pagination count={5}>\n   <Pagination.Next><ChevronRight /></Pagination.Next>\n   <Pagination.Previous><ChevronLeft /></Pagination.Previous>\n  </Pagination>\n  <Spacer h={.5} />\n  <Pagination count={5}>\n   <Pagination.Next><ChevronRightCircle /></Pagination.Next>\n   <Pagination.Previous><ChevronLeftCircle /></Pagination.Previous>\n  </Pagination>\n  <Spacer h={.5} />\n  <Pagination count={5}>\n   <Pagination.Next><ChevronRightCircleFill /></Pagination.Next>\n   <Pagination.Previous><ChevronLeftCircleFill /></Pagination.Previous>\n  </Pagination>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/pagination.mdx\">\n<Attributes.Title>Pagination.Props</Attributes.Title>\n\n| 属性            | 描述                   | 类型                     | 推荐值                   | 默认 |\n| --------------- | ---------------------- | ------------------------ | ------------------------ | ---- |\n| **initialPage** | 初始选中的页面         | `number`                 | -                        | 1    |\n| **page**        | 当前页码               | `number`                 | -                        | 1    |\n| **count**       | 页码数量               | `number`                 | -                        | 1    |\n| **limit**       | 一次可展示页面的最大值 | `number`                 | -                        | 7    |\n| **onChange**    | 分页器的事件           | `(page: number) => void` | -                        | -    |\n| ...             | 原生属性               | `HTMLAttributes`         | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Pagination.Previous.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型                   | 推荐值                   | 默认 |\n| ---- | -------- | ---------------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | -    |\n\n<Attributes.Title>Pagination.Next.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型                   | 推荐值                   | 默认 |\n| ---- | -------- | ---------------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/popover.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Popover, Spacer, Link } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: '气泡卡片 Popover',\n  group: '数据展示',\n}\n\n## Popover / 气泡卡片\n\n通过点击或鼠标移入触发的气泡风格弹出层。\n\n<Playground\n  desc=\"基础示例。\"\n  scope={{ Popover, Spacer, Link }}\n  code={`\n() => {\n  const content = () => (\n    <div style={{ padding: '0 10px' }}>\n      <Link href=\"#\">一个超链接</Link>\n      <Spacer h={.5} />\n      <Link color href=\"#\">外部链接</Link>\n    </div>\n  )\n  return (\n    <Popover content={content}>\n      菜单\n    </Popover>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"预置子选项\"\n  desc=\"使用预置的 `Item` 组件完成弹出内容的布局。\"\n  scope={{ Popover, Spacer, Link }}\n  code={`\n() => {\n  const content = () => (\n    <>\n      <Popover.Item title>\n        <span>用户设置</span>\n      </Popover.Item>\n      <Popover.Item>\n        <Link href=\"#\">一个超链接</Link>\n      </Popover.Item>\n      <Popover.Item>\n        <Link color href=\"#\">前往修改用户配置</Link>\n      </Popover.Item>\n      <Popover.Item line />\n      <Popover.Item>\n        <span>命令行工具</span>\n      </Popover.Item>\n    </>\n  )\n  return (\n    <Popover content={content}>\n      菜单\n    </Popover>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"手动关闭\"\n  desc=\"你可以控制何时手动地关闭弹出卡片。\"\n  scope={{ Popover, Spacer, Link, useState }}\n  code={`\n() => {\n  const [visible, setVisible] = useState(false)\n  const changeHandler = (next) => {\n    setVisible(next)\n  }\n  const content = () => (\n    <div style={{ padding: '0 10px' }}>\n      <span onClick={() => setVisible(false)}>点击关闭</span>\n      <Spacer h={.5} />\n      <span>不关闭</span>\n    </div>\n  )\n  return (\n    <Popover content={content} visible={visible}\n      onVisibleChange={changeHandler}>\n      菜单\n    </Popover>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/popover.mdx\">\n<Attributes.Title>Popover.Props</Attributes.Title>\n\n| 属性                      | 描述                         | 类型                          | 推荐值      | 默认     |\n| ------------------------- | ---------------------------- | ----------------------------- | ----------- | -------- |\n| **content**               | 气泡卡片内容                 | `ReactNode` `() => ReactNode` | -           | -        |\n| **visible**               | 手动控制气泡的显示与隐藏     | `boolean`                     | -           | `false`  |\n| **initialVisible**        | 初始是否可见                 | `boolean`                     | -           | `false`  |\n| **hideArrow**             | 隐藏箭头                     | `boolean`                     | -           | `false`  |\n| **placement**             | 气泡卡片与目标的对齐方式     | [Placement](#placement)       | -           | `bottom` |\n| **trigger**               | 触发气泡卡片的方式           | `'click' / 'hover'`           | -           | `click`  |\n| **enterDelay**(ms)        | 在提示显示前的延迟           | `number`                      | -           | `100`    |\n| **leaveDelay**(ms)        | 关闭提示前的延迟             | `number`                      | -           | `0`      |\n| **offset**(px)            | 提示框与目标之间的偏移       | `number`                      | -           | `12`     |\n| **portalClassName**       | 气泡卡片的类名               | `string`                      | -           | -        |\n| **onVisibleChange**       | 当气泡卡片状态改变时触发     | `(visible: boolean) => void`  | -           | -        |\n| **disableItemsAutoClose** | 当 Item 被点击时阻止气泡关闭 | `boolean`                     | -           | `false`  |\n| ...                       | 原生属性                     | `HTMLAttributes`              | `'id', ...` | -        |\n\n<Attributes.Title alias=\"Popover.Option\">Popover.Item</Attributes.Title>\n\n| 属性                 | 描述                         | 类型      | 推荐值 | 默认    |\n| -------------------- | ---------------------------- | --------- | ------ | ------- |\n| **line**             | 显示线条                     | `boolean` | -      | `false` |\n| **title**            | 用标题的样式展示文字         | `boolean` | -      | `false` |\n| **disableAutoClose** | 触发点击事件时也不要关闭气泡 | `boolean` | -      | `false` |\n\n<Attributes.Title>Placement</Attributes.Title>\n\n```ts\ntype Placement = 'top'\n  | 'topStart',\n  | 'topEnd',\n  | 'left',\n  | 'leftStart',\n  | 'leftEnd',\n  | 'bottom',\n  | 'bottomStart',\n  | 'bottomEnd',\n  | 'right',\n  | 'rightStart',\n  | 'rightEnd',\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/progress.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Progress, Spacer, useTheme, Button } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: '进度条 Progress',\n  group: '反馈',\n}\n\n## Progress / 进度条\n\n展示事件或与之相关的任务进展。\n\n<Playground\n  scope={{ Progress }}\n  code={`\n<Progress value={50} />\n`}\n/>\n\n<Playground\n  title=\"最大值\"\n  desc=\"自定义进度条的最大数值。\"\n  scope={{ Progress }}\n  code={`\n<Progress value={45} max={50} />\n`}\n/>\n\n<Playground\n  title=\"动态色彩\"\n  desc=\"你可以指定进度条在任何范围内的颜色。\"\n  scope={{ Progress, useState, useTheme, Button, Spacer }}\n  code={`\n() => {\n  const theme = useTheme()\n  const [value, setValue] = useState(20)\n  const colors = {\n    20: theme.palette.error,\n    40: theme.palette.warning,\n    60: theme.palette.success,\n    80: '#000',\n  }\n  return (\n    <>\n      <Progress value={value} colors={colors} />\n      <Spacer />\n      <Button onClick={() => setValue(value + 20)} auto scale={0.5}>增加</Button>\n      <Spacer w={.5} inline />\n      <Button onClick={() => setValue(20)} auto scale={0.5} type=\"abort\">重置</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"我们预置了一些不同风格的进度条。\"\n  scope={{ Progress, Spacer }}\n  code={`\n<>\n  <Progress type=\"secondary\" value={10} />\n  <Spacer />\n  <Progress type=\"success\" value={45} />\n  <Spacer />\n  <Progress type=\"warning\" value={100} />\n  <Spacer />\n  <Progress type=\"error\" value={21} />\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/progress.mdx\">\n<Attributes.Title>Progress.Props</Attributes.Title>\n\n| 属性            | 描述               | 类型                        | 推荐值                          | 默认      |\n| --------------- | ------------------ | --------------------------- | ------------------------------- | --------- |\n| **value**       | 进度条当前数值     | `number`                    | -                               | 0         |\n| **max**         | 最大值             | `number`                    | -                               | 100       |\n| **fixedTop**    | 固定进度条在顶部   | `boolean`                   | -                               | `false`   |\n| **fixedBottom** | 固定进度条在底部   | `boolean`                   | -                               | `false`   |\n| **colors**      | 在范围内自定义颜色 | `{ [key: number]: string }` | -                               | -         |\n| **type**        | 预定义的状体类型   | `ProgressTypes`             | [ProgressTypes](#progresstypes) | `default` |\n| ...             | 原生属性           | `ProgressHTMLAttributes`    | `'aria-busy', 'className', ...` | -         |\n\n<Attributes.Title>ProgressTypes</Attributes.Title>\n\n```ts\ntype ProgressTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/radio.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Radio, Code, Text, Spacer } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: '单选框 Radio',\n  group: '数据录入',\n}\n\n## Radio / 单选框\n\n提供用户输入的选择项。\n\n<Playground\n  scope={{ Radio }}\n  code={`\n<Radio checked={false}>选项 1</Radio>\n`}\n/>\n\n<Playground\n  title=\"组\"\n  desc=\"一组可控选择的数值。\"\n  scope={{ Radio, useState }}\n  code={`\n() => {\n  const [state, setState] = useState('1')\n  const handler = val => {\n    setState(val)\n    console.log(val)\n  }\n  return (\n    <>\n      <Radio.Group value={state} onChange={handler}>\n        <Radio value=\"1\">上海</Radio>\n        <Radio value=\"2\">广州</Radio>\n      </Radio.Group>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"以色彩展示不同状态。\"\n  scope={{ Radio, Spacer }}\n  code={`\n<>\n  <Radio checked={false} type=\"default\">Default</Radio>\n  <Spacer h={.5} />\n  <Radio checked={false} type=\"success\">Success</Radio>\n  <Spacer h={.5} />\n  <Radio checked={false} type=\"warning\">Warning</Radio>\n  <Spacer h={.5} />\n  <Radio checked={false} type=\"error\">Error</Radio>\n</>\n`}\n/>\n\n<Playground\n  title=\"描述\"\n  desc=\"`Description` 属性可以与组件结合使用。\"\n  scope={{ Radio, Text }}\n  code={`\n<Radio.Group value=\"1\" onChange={val => console.log(val)}>\n  <Radio value=\"1\">\n    No Store\n    <Radio.Description>缓存中不得存储任何关于客户端请求和服务端响应的内容。</Radio.Description>\n  </Radio>\n  <Radio value=\"2\">\n    No Cache\n    <Radio.Desc>服务器端会验证 <Text b>请求中所描述的缓存</Text> 是否过期</Radio.Desc>\n  </Radio>\n</Radio.Group>\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  desc=\"禁用组内所有的可选项。\"\n  scope={{ Radio, useState, Code }}\n  code={`\n<Radio.Group value=\"1\" disabled>\n  <Radio value=\"1\">郑州</Radio>\n  <Radio value=\"2\">南昌</Radio>\n</Radio.Group>\n`}\n/>\n\n<Playground\n  title=\"行\"\n  desc=\"水平排列所有的选项。\"\n  scope={{ Radio, Code }}\n  code={`\n<Radio.Group value=\"1\" useRow>\n  <Radio value=\"1\">\n    MSQRT\n    <Radio.Desc>不带根数的平方根</Radio.Desc>\n  </Radio>\n  <Radio value=\"2\">\n    MROOT\n    <Radio.Desc>带指定根数的根号</Radio.Desc>\n  </Radio>\n</Radio.Group>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/radio.mdx\">\n<Attributes.Title>Radio.Props</Attributes.Title>\n\n| 属性         | 描述                              | 类型                      | 推荐值                          | 默认    |\n| ------------ | --------------------------------- | ------------------------- | ------------------------------- | ------- |\n| **checked**  | 是否选择 (仅在单独使用时有效)     | `boolean`                 | -                               | `false` |\n| **value**    | 唯一的鉴别值 (仅在组内使用时有效) | `string`                  | -                               | -       |\n| **disabled** | 禁用当前选项                      | `boolean`                 | -                               | `false` |\n| **onChange** | 选项变化事件                      | `(e: RadioEvent) => void` | -                               | -       |\n| ...          | 原生属性                          | `InputHTMLAttributes`     | `'id', 'alt', 'className', ...` | -       |\n\n<Attributes.Title>Radio.Group.Props</Attributes.Title>\n\n| 属性             | 描述                 | 类型                      | 推荐值                           | 默认    |\n| ---------------- | -------------------- | ------------------------- | -------------------------------- | ------- |\n| **initialValue** | 初始值               | `string`                  | -                                | -       |\n| **value**        | 设置选中的子选项值   | `string`                  | -                                | -       |\n| **useRow**       | 水平对齐所有子单选框 | `boolean`                 | -                                | `false` |\n| **disabled**     | 禁用组内所有单选框   | `boolean`                 | -                                | `false` |\n| **onChange**     | 组的值变化事件       | `(value: string) => void` | -                                | -       |\n| ...              | 原生属性             | `HTMLAttributes`          | `'name', 'id', 'className', ...` | -       |\n\n<Attributes.Title alias=\"Radio.Desc\">Radio.Description.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                           | 默认 |\n| ---- | -------- | ---------------- | -------------------------------- | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'name', 'id', 'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/rating.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Rating, Grid, Spacer } from 'components'\nimport { useState } from 'react'\nimport { Award, Github } from '@geist-ui/icons'\n\nexport const meta = {\n  title: '评分 Rating',\n  group: '反馈',\n}\n\n## Rating / 评分\n\n以多个图标展示可互动的评分。\n\n<Playground\n  desc=\"设置初始值与回调事件。\"\n  scope={{ Rating, Grid, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState(1)\n  const [locked, setLocked] = useState(false)\n  return(\n    <Grid.Container gap={2}>\n      <Grid xs={24} md={8} justify=\"center\">\n        <Rating onLockedChange={setLocked} value={value} onValueChange={setValue}/>\n      </Grid>\n      <Grid xs={12} md={8} justify=\"center\">已选择: {value}</Grid>\n      <Grid xs={12} md={8} justify=\"center\">锁定: {locked ? \"是\" : \"否\"}</Grid>\n    </Grid.Container>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"通过 `type` 属性展示不同的评分组件。\"\n  scope={{ Rating, Grid }}\n  code={`\n<Grid.Container gap={2} justify=\"center\">\n  <Grid xs={24} sm={24} md={8} justify=\"center\"><Rating type=\"success\"/></Grid>\n  <Grid xs={24} sm={12} md={8} justify=\"center\"><Rating type=\"error\"/></Grid>\n  <Grid xs={24} sm={12} md={8} justify=\"center\"><Rating type=\"warning\"/></Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"最大数量\"\n  desc=\"定制图标的最大数量。\"\n  scope={{ Rating, Spacer }}\n  code={`\n<>\n  <Rating count={2} />\n  <Spacer h={0.5} />\n  <Rating value={3} count={6} />\n  <Spacer h={0.5} />\n  <Rating value={4} count={8}/>\n</>\n`}\n/>\n\n<Playground\n  title=\"图标\"\n  desc=\"以自定义 SVG 图标代替默认的星星图案。\"\n  scope={{ Rating, Award, Github, Spacer }}\n  code={`\n<>\n  <Rating\n     value={4}\n     count={6}\n     type=\"success\"\n     icon={<Github />} />\n  <Spacer h={0.5} />\n  <Rating count={7}  type=\"error\" icon={<Award />} />\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/rating.mdx\">\n<Attributes.Title>Rating.Props</Attributes.Title>\n\n| 属性               | 描述             | 类型                    | 推荐值                      | 默认      |\n| ------------------ | ---------------- | ----------------------- | --------------------------- | --------- |\n| **type**           | 评分组件类型     | `RatingTypes`           | [RatingTypes](#ratingtypes) | `default` |\n| **icon**           | 自定义图标       | `JSX.Element`           | -                           | -         |\n| **count**          | 展示图标最大数量 | `number`                | [RatingCount](#ratingcount) | `5`       |\n| **value**          | 选中值           | `number`                | [RatingValue](#ratingvalue) | -         |\n| **initialValue**   | 初始值           | `number`                | [RatingValue](#ratingvalue) | `1`       |\n| **onValueChange**  | 值变化的事件     | `(value?: any) => void` | -                           | -         |\n| **locked**         | 是否锁定         | `boolean`               | -                           | `false`   |\n| **onLockedChange** | 锁定变化事件     | `(value?: any) => void` | -                           | -         |\n| ...                | 原生属性         | `HTMLAttributes`        | -                           | -         |\n\n<Attributes.Title>RatingTypes</Attributes.Title>\n\n```ts\ntype RatingTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>RatingCount</Attributes.Title>\n\n```ts\ntype RatingCount = 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10\n```\n\n<Attributes.Title>RatingValue</Attributes.Title>\n\n```ts\ntype RatingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/select.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Select, Spacer, Code, Modal, useModal, Button } from 'components'\n\nexport const meta = {\n  title: '选择器 Select',\n  group: '数据录入',\n}\n\n## Select / 选择器\n\n显示下拉列表选框。\n\n对话框组件包含额外的 Hooks，详情请参阅 [useModal](/zh-cn/hooks/use-modal) 小节。\n\n<Playground\n  scope={{ Select }}\n  code={`\n() => {\n  const handler = val => console.log(val)\n  return (\n    <Select placeholder=\"选择工作方式\" onChange={handler}>\n      <Select.Option value=\"1\">远程工作</Select.Option>\n      <Select.Option value=\"2\">线下工作</Select.Option>\n    </Select>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  desc=\"禁用所有的交互。\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"选择工作方式\" disabled>\n  <Select.Option value=\"1\">Option 1</Select.Option>\n  <Select.Option value=\"2\">Option 2</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"禁用选项\"\n  desc=\"禁用指定的选项。\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"选择工作地点\">\n  <Select.Option value=\"1\" disabled>北京</Select.Option>\n  <Select.Option value=\"2\">上海</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"无图标\"\n  desc=\"隐藏选择器右侧的图标。\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"工作方式\" pure>\n  <Select.Option value=\"1\">远程办公</Select.Option>\n  <Select.Option value=\"2\">线下工作</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"以色彩展示不同状态。\"\n  scope={{ Select, Spacer }}\n  code={`\n() => (\n  <>\n    <Select placeholder=\"Default\" type=\"default\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n    <Spacer h={.5} />\n    <Select type=\"success\" initialValue=\"1\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n    <Spacer h={.5} />\n    <Select type=\"warning\" initialValue=\"2\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n    <Spacer h={.5} />\n    <Select type=\"error\" initialValue=\"1\">\n      <Select.Option value=\"1\">Option 1</Select.Option>\n      <Select.Option value=\"2\">Option 2</Select.Option>\n    </Select>\n  </>\n)\n`}\n/>\n\n<Playground\n  title=\"标签\"\n  desc=\"用标签将选项分组。\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"选择框架\">\n  <Select.Option label>JavaScript</Select.Option>\n  <Select.Option value=\"react\">React</Select.Option>\n  <Select.Option value=\"angular\">Angular</Select.Option>\n  <Select.Option label>Ruby</Select.Option>\n  <Select.Option value=\"rails\">Rails</Select.Option>\n  <Select.Option value=\"sinatra\">Sinatra</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"分割线\"\n  desc=\"在选项中加入修饰用的线条。\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"选择框架\">\n  <Select.Option value=\"react\">React</Select.Option>\n  <Select.Option value=\"angular\">Angular</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"rails\">Rails</Select.Option>\n  <Select.Option value=\"sinatra\">Sinatra</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"多选\"\n  desc=\"`Select` 组件支持同时选中多个值。\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"选择框架\" multiple width=\"200px\" initialValue={['1', '3', '4', '6']}>\n  <Select.Option value=\"1\">React</Select.Option>\n  <Select.Option value=\"2\">Angular</Select.Option>\n  <Select.Option value=\"3\">Vue</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"4\">Rails</Select.Option>\n  <Select.Option value=\"5\">Sinatra</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"6\">Express</Select.Option>\n  <Select.Option value=\"7\">Koa</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"无移除图标的多选\"\n  desc=\"`Select` 支持不携带移除图标的多选控件。\"\n  scope={{ Select }}\n  code={`\n<Select placeholder=\"选择框架\" multiple width=\"200px\" clearable={false} initialValue={['1', '3', '4', '6']}>\n  <Select.Option value=\"1\">React</Select.Option>\n  <Select.Option value=\"2\">Angular</Select.Option>\n  <Select.Option value=\"3\">Vue</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"4\">Rails</Select.Option>\n  <Select.Option value=\"5\">Sinatra</Select.Option>\n  <Select.Option divider />\n  <Select.Option value=\"6\">Express</Select.Option>\n  <Select.Option value=\"7\">Koa</Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"组合\"\n  desc=\"与其他组件组合使用。\"\n  scope={{ Select, Code }}\n  code={`\n<Select placeholder=\"选择语言\" initialValue=\"1\">\n  <Select.Option value=\"1\"><Code>TypeScript</Code></Select.Option>\n  <Select.Option value=\"2\"><Code>JavaScript</Code></Select.Option>\n</Select>\n`}\n/>\n\n<Playground\n  title=\"超出宽度\"\n  desc=\"`Option` 可以自适应宽度以展示更多文本。\"\n  scope={{ Select, Spacer }}\n  code={`\n<>\n  <Select placeholder=\"选择内容\" value=\"1\" width=\"150px\">\n    <Select.Option value=\"1\">截断过程的文本内容当文本过长</Select.Option>\n    <Select.Option value=\"2\">选项 2</Select.Option>\n  </Select>\n  <Spacer h={.5} />\n  <Select placeholder=\"选择内容\" value=\"1\" width=\"150px\" disableMatchWidth>\n    <Select.Option value=\"1\">自动伸缩选项宽度以显示更多文本</Select.Option>\n    <Select.Option value=\"2\">选项 2</Select.Option>\n  </Select>\n</>\n`}\n/>\n\n<Playground\n  title=\"设置渲染容器\"\n  desc=\"你可以指定下拉框的元素渲染的容器。\"\n  scope={{ Select, Spacer, useModal, Modal, Button, Code }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n    return (\n      <>\n        <Button auto onClick={() => setVisible(true)}>显示选择器</Button>\n        <Modal {...bindings}>\n          <Modal.Title>Modal</Modal.Title>\n          <Modal.Content id=\"customModalSelect\">\n            <Select placeholder=\"选择语言\" initialValue=\"1\"\n              getPopupContainer={() => document.getElementById('customModalSelect')}>\n              <Select.Option value=\"1\"><Code>TypeScript</Code></Select.Option>\n              <Select.Option value=\"2\"><Code>JavaScript</Code></Select.Option>\n            </Select>\n            <p>滚动以查看下拉框的工作方式。(超出弹出层会被隐藏)</p>\n            <div style={{ height: '1200px' }}></div>\n            <p>滚动以查看下拉框的工作方式。</p>\n          </Modal.Content>\n          <Modal.Action passive onClick={() => setVisible(false)}>取消</Modal.Action>\n        </Modal>\n      </>\n    )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/select.mdx\">\n<Attributes.Title>Select.Props</Attributes.Title>\n\n| 属性                        | 描述                              | 类型                                                | 推荐值                  | 默认            |\n| --------------------------- | --------------------------------- | --------------------------------------------------- | ----------------------- | --------------- |\n| **value**                   | 手动设置选择器的值                | `string`, `string[]`                                | -                       | -               |\n| **initialValue**            | 选择器初始值                      | `string`, `string[]`                                | -                       | -               |\n| **placeholder**             | 占位文本内容                      | `string`                                            | -                       | -               |\n| **width**                   | 组件的 CSS 宽度值                 | `string`                                            | -                       | `initial`       |\n| **icon**                    | 右侧图标组件                      | `ComponentType`                                     | -                       | `SVG Component` |\n| **pure**                    | 隐藏右侧图标组件                  | `boolean`                                           | -                       | `false`         |\n| **multiple**                | 是否支持多选                      | `boolean`                                           | -                       | `false`         |\n| **clearable**               | 多选时是否展示移除图标            | `boolean`                                           | -                       | `true`          |\n| **disabled**                | 禁用所有的交互                    | `boolean`                                           | -                       | `false`         |\n| **onChange**                | 选项被选中所触发的事件            | <Code>(val: string &#124; string[]) => void </Code> | -                       | -               |\n| **dropdownClassName**       | 下拉框的自定义类名                | `string`                                            | -                       | -               |\n| **dropdownStyle**           | 下拉框的自定义样式                | `object`                                            | -                       | -               |\n| **disableMatchWidth**       | 禁止 Option 跟随单选框的宽度      | `boolean`                                           | -                       | `false`         |\n| **getPopupContainer**       | 下拉框渲染的父元素，默认是 `body` | `() => HTMLElement`                                 | -                       | -               |\n| **onDropdownVisibleChange** | 下拉框可见性变化事件              | `(visible: boolean) => void`                        | -                       | -               |\n| **ref**                     | 转发的 Ref                        | `SelectRef`                                         | [SelectRef](#selectref) | -               |\n| ...                         | 原生属性                          | `HTMLAttributes`                                    | `'name', 'alt', ...`    | -               |\n\n<Attributes.Title>SelectRef</Attributes.Title>\n\n```ts\ntype SelectRef = {\n  focus: () => void\n  blur: () => void\n  scrollTo?: (options?: ScrollToOptions) => void\n}\n```\n\n<Attributes.Title>Select.Option.Props</Attributes.Title>\n\n| 属性              | 描述           | 类型             | 推荐值                           | 默认    |\n| ----------------- | -------------- | ---------------- | -------------------------------- | ------- |\n| **value**(必须的) | 唯一鉴别值     | `string`         | -                                | -       |\n| **disabled**      | 禁用当前选项   | `boolean`        | -                                | `false` |\n| **divider**       | 显示线条       | `boolean`        | -                                | `false` |\n| **label**         | 显示分组的标题 | `boolean`        | -                                | `false` |\n| ...               | 原生属性       | `HTMLAttributes` | `'name', 'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/slider.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Slider, Spacer } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: '滑动输入 Slider',\n  group: '数据录入',\n}\n\n## Slider / 滑动输入\n\n展示当前值与一个可输入范围。\n\n<Playground\n  desc=\"允许点击和滑动事件。\"\n  scope={{ Slider }}\n  code={`\n<Slider initialValue={20} />\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  desc=\"不响应所有的操作。\"\n  scope={{ Slider }}\n  code={`\n<Slider initialValue={50} disabled />\n`}\n/>\n\n<Playground\n  title=\"步长\"\n  desc=\"不同粒度的滑块。\"\n  scope={{ Slider }}\n  code={`\n<Slider step={10} showMarkers />\n`}\n/>\n\n<Playground\n  title=\"范围\"\n  desc=\"手动指定最大值或最小值。\"\n  scope={{ Slider, Spacer }}\n  code={`\n<div style={{ width: '75%' }}>\n  <Slider step={5} max={50} min={10} initialValue={25} showMarkers />\n  <Spacer />\n  <Slider step={0.2} max={1} min={0.2} initialValue={0.4} showMarkers />\n</div>\n`}\n/>\n\n<Playground\n  title=\"事件\"\n  desc=\"在滑动时获取值的变化。\"\n  scope={{ Slider, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState()\n  const handler = val => {\n    console.log(val)\n    setValue(val)\n  }\n  return (\n     <Slider value={value} onChange={handler} width=\"75%\" />\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/slider.mdx\">\n<Attributes.Title>Slider.Props</Attributes.Title>\n\n| 属性             | 描述                   | 类型                    | 推荐值                           | 默认    |\n| ---------------- | ---------------------- | ----------------------- | -------------------------------- | ------- |\n| **initialValue** | 初始值                 | `number`                | -                                | 0       |\n| **value**        | 手动指定滑块的值       | `number`                | -                                | 0       |\n| **step**         | 滑块可选择的粒度大小   | `number`                | -                                | 1       |\n| **max**          | 滑块可选的最大值       | `number`                | -                                | 100     |\n| **min**          | 滑块可选的最小值       | `number`                | -                                | 0       |\n| **disabled**     | 禁用所有操作           | `boolean`               | `false`                          |\n| **showMarkers**  | 显示每一个标记         | `boolean`               | -                                | `false` |\n| **hideValue**    | 是否隐藏滑块中的数字   | `boolean`               | -                                | `false` |\n| **onChange**     | 当滑块的值改变时被调用 | `(val: number) => void` | -                                | -       |\n| ...              | 原生属性               | `HTMLAttributes`        | `'id', 'name', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/snippet.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Snippet, Spacer, Code } from 'components'\n\nexport const meta = {\n  title: '片段 Snippet',\n  group: '其他',\n}\n\n## Snippet / 片段\n\n显示可拷贝的命令行代码片段。\n\n<Playground\n  desc=\"展示一个命令。\"\n  scope={{ Snippet }}\n  code={`\n<Snippet text=\"yarn add @geist-ui/core\" width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"宽度\"\n  desc=\"手动地指定宽度。\"\n  scope={{ Snippet }}\n  code={`\n<Snippet text=\"yarn add @geist-ui/core\" width=\"100%\" />\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"以颜色区分不同的类型。\"\n  scope={{ Snippet, Spacer }}\n  code={`\n<>\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"dark\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"success\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"warning\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"error\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"secondary\" width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"lite\" width=\"300px\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"多行\"\n  scope={{ Snippet }}\n  code={`\n<Snippet text={['cd project', 'now']} width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"无拷贝\"\n  desc=\"隐藏拷贝按钮。 (禁用拷贝)\"\n  scope={{ Snippet }}\n  code={`\n<Snippet copy=\"prevent\" text=\"yarn add @geist-ui/core\" width=\"300px\" />\n`}\n/>\n\n<Playground\n  title=\"填充\"\n  scope={{ Snippet, Spacer }}\n  code={`\n<>\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"success\" filled width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"warning\" filled width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"error\" filled width=\"300px\" />\n  <Spacer />\n  <Snippet text=\"yarn add @geist-ui/core\" type=\"secondary\" filled width=\"300px\" />\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/snippet.mdx\">\n<Attributes.Title>Snippet.Props</Attributes.Title>\n\n| 属性          | 描述               | 类型                     | 推荐值                        | 默认                   |\n| ------------- | ------------------ | ------------------------ | ----------------------------- | ---------------------- |\n| **text**      | 命令文本           | `string` `Array<string>` | -                             | -                      |\n| **type**      | 组件类型           | `SnippetTypes`           | [SnippetTypes](#snippettypes) | `default`              |\n| **filled**    | 填充风格的样式     | `boolean`                | -                             | `false`                |\n| **width**     | 设置 CSS 宽度      | `string`                 | -                             | `initial`              |\n| **copy**      | 拷贝按钮的工作方式 | `CopyTypes`              | [CopyTypes](#copytypes)       | `default`              |\n| **symbol**    | 组件左侧显示的字符 | `string`                 | -                             | `$`                    |\n| **toastText** | 拷贝提示的字符     | `string`                 | -                             | `Copied to clipboard!` |\n| **toastType** | 拷贝提示的类型     | `ToastTypes`             | [ToastTypes](#toasttypes)     | `success`              |\n| ...           | 原生属性           | `HTMLAttributes`         | `'id', 'name', ...`           | -                      |\n\n<Attributes.Title>SnippetTypes</Attributes.Title>\n\n```ts\ntype SnippetTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n<Attributes.Title>CopyTypes</Attributes.Title>\n\n```ts\ntype CopyTypes = 'default' | 'silent' | 'prevent'\n```\n\n<Attributes.Title>SnippetTypes</Attributes.Title>\n\n```ts\ntype SnippetTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>ToastTypes</Attributes.Title>\n\n```ts\ntype ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/spacer.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Spacer, Grid } from 'components'\n\nexport const meta = {\n  title: '间距 Spacer',\n  group: '布局',\n}\n\n## Spacer / 间距\n\n为排版提供标准化的空间。\n\n<Playground\n  title=\"垂直的\"\n  scope={{ Spacer, Grid }}\n  code={`\n<Grid.Container>\n  <Grid xs={24} style={{ background: '#444', borderRadius: '15px' }}>\n    <Spacer h={2}/>\n  </Grid>\n  <Spacer h={2}/>\n  <Grid xs={24} style={{ background: '#666', borderRadius: '15px' }}>\n    <Spacer h={3}/>\n  </Grid>\n  <Spacer h={3}/>\n  <Grid xs={24} style={{ background: '#999', borderRadius: '15px' }}>\n    <Spacer h={4}/>\n  </Grid>\n</Grid.Container>\n`}\n/>\n\n<Playground\n  title=\"水平的\"\n  scope={{ Spacer, Grid }}\n  code={`\n<Grid.Container>\n  <Grid xs={4} style={{ background: '#444', borderRadius: '15px' }} />\n  <Spacer w={5}/>\n  <Grid xs={4} style={{ background: '#444', borderRadius: '15px' }} />\n</Grid.Container>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/spacer.mdx\">\n<Attributes.Title>Spacer.Props</Attributes.Title>\n\n| 属性       | 描述                    | 类型               | 推荐值                   | 默认    |\n| ---------- | ----------------------- | ------------------ | ------------------------ | ------- |\n| **x**      | X 轴间距                | `number` / `float` | -                        | 1       |\n| **y**      | Y 轴间距                | `number` / `float` | -                        | 1       |\n| **inline** | 行内模式 (不会产生换行) | `boolean`          | -                        | `false` |\n| ...        | 原生属性                | `HTMLAttributes`   | `'id', 'className', ...` | -       |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/spinner.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Spinner } from 'components'\n\nexport const meta = {\n  title: '指示器 Spinner',\n  group: '反馈',\n}\n\n## Spinner / 指示器\n\n表示一个动作正在进行中。\n\n作为加载指示器，可以参阅类似组件 [Loading](/zh-cn/components/loading).\n\n<Playground\n  scope={{ Spinner }}\n  code={`\n<Spinner />\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/spinner.mdx\">\n<Attributes.Title>Spinner.Props</Attributes.Title>\n\n| 属性 | 描述     | 类型             | 推荐值                   | 默认 |\n| ---- | -------- | ---------------- | ------------------------ | ---- |\n| ...  | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/table.mdx",
    "content": "import { Layout, Playground, PlaygroundTitle, Attributes } from 'lib/components'\nimport { Table, Spacer, Code, Text, Button } from 'components'\n\nexport const meta = {\n  title: '表格 Table',\n  group: '数据展示',\n}\n\n## Table / 表格\n\n以规则的表格显示数据集。\n\n<Playground\n  desc=\"显示规则化的行和列。\"\n  scope={{ Table }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: 'string', default: '-' },\n    { property: 'bold', description: 'Bold style', type: 'boolean', default: 'true' },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\" label=\"type\" />\n      <Table.Column prop=\"default\" label=\"default\" />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"组合\"\n  desc=\"在表格中显示其他组件。\"\n  scope={{ Table, Code, Text }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },\n    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\" label=\"type\" />\n      <Table.Column prop=\"default\" label=\"default\" />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"宽度\"\n  desc=\"为任意列指定宽度，剩下列会自动适应。\"\n  scope={{ Table, Code, Text }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },\n    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" width={50} />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\" label=\"type\" />\n      <Table.Column prop=\"default\" label=\"default\" />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"操作\"\n  desc=\"显示自定义的按钮并操作数据，任何更改会立刻呈现。\"\n  scope={{ Table, Text, Button }}\n  code={`\n() => {\n  const dataSource = [\n    { property: 'type', description: 'Content type', operation: '' },\n    { property: 'Component', description: 'DOM element to use', operation: '' },\n    { property: <Text b>bold</Text>, description: 'Bold style', operation: '' },\n  ]\n  const [data, setData] = React.useState(dataSource)\n  const renderAction = (value, rowData, index) => {\n    const removeHandler = () => {\n      setData(last => last.filter((_, dataIndex) => dataIndex !== index))\n    }\n    return (\n      <Button type=\"error\" auto scale={1/3} font=\"12px\" onClick={removeHandler}>Remove</Button>\n    )\n  }\n  return (\n  <Table data={data} onChange={value => setData(value)}>\n    <Table.Column prop=\"property\" label=\"property\" />\n    <Table.Column prop=\"description\" label=\"description\" />\n    <Table.Column prop=\"operation\" label=\"operation\" width={150} render={renderAction} />\n  </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"更新行\"\n  desc=\"你可以更新指定的行数据。\"\n  scope={{ Table, Text, Button }}\n  code={`\n() => {\n  const dataSource = [\n    { property: 'type', description: 'Content type', operation: '' },\n    { property: 'Component', description: 'DOM element to use', operation: '' },\n    { property: <Text b>bold</Text>, description: 'Bold style', operation: '' },\n  ]\n  const [data, setData] = React.useState(dataSource)\n  const renderAction = (value, rowData, rowIndex) => {\n    const updateHandler = () => {\n      setData(last => {\n        return last.map((item, dataIndex) => {\n          if (dataIndex !== rowIndex) return item\n          return {\n            ...item,\n            property: Math.random().toString(16).slice(-5)\n          }\n        })\n      })\n    }\n    return (\n      <Button type=\"secondary\" auto scale={1/3} font=\"12px\" onClick={updateHandler}>Update</Button>\n    )\n  }\n  return (\n    <Table data={data} onChange={value => setData(value)}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"operation\" label=\"operation\" width={150} render={renderAction} />\n    </Table>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"定制头\"\n  scope={{ Table, Code, Text }}\n  code={`\n() => {\n  const data = [\n    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },\n    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },\n    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },\n  ]\n  return (\n    <Table data={data}>\n      <Table.Column prop=\"property\" label=\"property\" />\n      <Table.Column prop=\"description\" label=\"description\" />\n      <Table.Column prop=\"type\">\n        <Code>type</Code>\n      </Table.Column>\n      <Table.Column prop=\"default\">\n        <Text b>default</Text>\n      </Table.Column>\n    </Table>\n  )\n}\n`}\n/>\n\n<PlaygroundTitle title=\"TypeScript 示例\" desc=\"在 TS 中通过指定泛型获得更好的体验。\" />\n\n```tsx\ntype User = {\n  name: string\n  role: string\n  records: Array<{ date: string }>\n}\nconst renderHandler: TableColumnRender<User> = (value, rowData, index) => {\n  return <div>{rowData.date}</div>\n}\nconst data: Array<User> = [\n  { name: 'witt', role: 'admin', records: [{ date: '2021-05-01' }] },\n]\n\nconst MyComponent = () => (\n  <Table<User> data={data}>\n    <Table.Column<User> prop=\"name\" label=\"用户名\" />\n    <Table.Column<User> prop=\"role\" label=\"角色\" />\n    <Table.Column<User> prop=\"records\" label=\"记录\" render={renderHandler} />\n  </Table>\n)\n```\n\n<Attributes edit=\"/pages/zh-cn/components/table.mdx\">\n<Attributes.Title>Table.Props</Attributes.Title>\n\n| 属性             | 描述                   | 类型                                                  | 推荐值              | 默认   |\n| ---------------- | ---------------------- | ----------------------------------------------------- | ------------------- | ------ |\n| **data**         | 数据源                 | `Array<T>`                                            | -                   | -      |\n| **initialData**  | 初始数据               | `Array<T>`                                            | -                   | `[]`   |\n| **emptyText**    | 当数据为空时显示的文本 | `string`                                              | -                   | -      |\n| **hover**        | 是否显示 hover 效果    | `boolean`                                             | -                   | `true` |\n| **onRow**        | 行的点击事件           | [TableOnRowClick](#tableonrowclick)                   | -                   | -      |\n| **onCell**       | 单元格的点击事件       | [TableOnCellClick](#tableoncellclick)                 | -                   | -      |\n| **onChange**     | 数据变化的事件         | `(data: T) => void`                                   | -                   | -      |\n| **rowClassName** | 为每一行设置类名       | [TableRowClassNameHandler](#tablerowclassnamehandler) | -                   | -      |\n| ...              | 原生属性               | `TableHTMLAttributes`                                 | `'id', 'name', ...` | -      |\n\n<Attributes.Title>Table.Column.Props</Attributes.Title>\n\n| 属性             | 描述                       | 类型                                    | 推荐值 | 默认 |\n| ---------------- | -------------------------- | --------------------------------------- | ------ | ---- |\n| **prop**(必须的) | 列对应的数据属性           | `string`                                | -      | -    |\n| **label**        | 每一列的标签文本           | `string`                                | -      | -    |\n| **width**        | 指定宽度                   | `number`                                | -      | -    |\n| **className**    | 指定当前列的类名           | `string`                                | -      | -    |\n| **render**       | 为所有列渲染函数返回的数据 | [TableColumnRender](#tablecolumnrender) | -      | -    |\n\n<Attributes.Title>TableOnRowClick</Attributes.Title>\n\n```ts\ntype TableOnRowClick<T> = (rowData: T, rowIndex: number) => void\n```\n\n<Attributes.Title>TableOnCellClick</Attributes.Title>\n\n```ts\ntype TableOnCellClick<T> = (\n  value: T[keyof T],\n  rowIndex: number,\n  colunmIndex: number,\n) => void\n```\n\n<Attributes.Title>TableRowClassNameHandler</Attributes.Title>\n\n```ts\ntype TableRowClassNameHandler<T> = (rowData: T, rowIndex: number) => string\n```\n\n<Attributes.Title>TableColumnRender</Attributes.Title>\n\n```ts\ntype TableColumnRender<T extends Record> = (\n  value: T[keyof T],\n  rowData: T,\n  rowIndex: number,\n) => JSX.Element | void\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/tabs.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tabs, Spacer, Link, Text, Button, Code } from 'components'\nimport { useState } from 'react'\nimport TwitterIcon from '@geist-ui/icons/twitter'\nimport TwitchIcon from '@geist-ui/icons/twitch'\n\nexport const meta = {\n  title: '选项卡 Tabs',\n  group: '导航',\n}\n\n## Tabs / 选项卡\n\n显示选项卡的内容。\n\n选项卡组件包含额外的 Hooks，详情请参阅 [useTabs](/zh-cn/hooks/use-tabs) 小节。\n\n<Playground\n  scope={{ Tabs }}\n  desc=\"切换显示不同的内容。\"\n  code={`\n<Tabs initialValue=\"1\">\n  <Tabs.Item label=\"二进制\" value=\"1\">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>\n  <Tabs.Item label=\"八进制\" value=\"2\">八进制表示为开头是0后接大写或小写的O（0o或0O）。</Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  scope={{ Tabs }}\n  code={`\n<Tabs initialValue=\"1\">\n  <Tabs.Item label=\"二进制\" value=\"1\">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>\n  <Tabs.Item label=\"八进制\" value=\"2\" disabled />\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"隐藏分割线\"\n  scope={{ Tabs, Text }}\n  code={`\n<Tabs initialValue=\"html\" hideDivider>\n  <Tabs.Item label=\"HTML\" value=\"html\">\n    <Text mt={0}>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"CSS\" value=\"css\">\n    <Text mt={0}>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容，以及添加像动画一类的行为。</Text>\n  </Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"隐藏边框\"\n  scope={{ Tabs, Text }}\n  code={`\n<Tabs initialValue=\"html\" hideDivider hideBorder>\n  <Tabs.Item label=\"HTML\" value=\"html\">\n    <Text mt={0}>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。</Text>\n  </Tabs.Item>\n  <Tabs.Item label=\"CSS\" value=\"css\">\n    <Text mt={0}>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容，以及添加像动画一类的行为。</Text>\n  </Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"图标\"\n  desc=\"在选项卡的标签上显示图标组件。\"\n  scope={{ Tabs, TwitterIcon, TwitchIcon, Link, Text }}\n  code={`\n<Tabs align=\"center\" initialValue=\"1\">\n  <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value=\"1\">\n    <Text mt={0}>你好，这是我们在 Twitch 的最新直播。</Text>\n  </Tabs.Item>\n  <Tabs.Item label={<><TwitterIcon /> Twitter </>} value=\"2\">\n    <Text mt={0}>这个组件看起来还不错。</Text>\n  </Tabs.Item>\n</Tabs>\n`}\n/>\n\n<Playground\n  title=\"命令式\"\n  desc=\"以命令式的风格控制选项卡组件。\"\n  scope={{ Tabs, Button, Spacer, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState('1')\n  const switchHandler = () => setValue('2')\n  const changeHandler = val => setValue(val)\n  return (\n    <>\n      <Button scale={1/3} font=\"12px\" onClick={switchHandler} auto>选择八进制</Button>\n      <Spacer />\n      <Tabs value={value} onChange={changeHandler}>\n        <Tabs.Item label=\"二进制\" value=\"1\">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>\n        <Tabs.Item label=\"八进制\" value=\"2\">八进制表示为开头是0后接大写或小写的O（0o或0O）。</Tabs.Item>\n      </Tabs>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/tabs.mdx\">\n<Attributes.Title>Tabs.Props</Attributes.Title>\n\n| 属性                 | 描述                   | 类型                    | 推荐值                          | 默认    |\n| -------------------- | ---------------------- | ----------------------- | ------------------------------- | ------- |\n| **initialValue**     | 初始值                 | `string`                | -                               | -       |\n| **value**            | 设定当前选项           | `string`                | -                               | -       |\n| **hideDivider**      | 隐藏默认分割线         | `boolean`               | -                               | `false` |\n| **hideBorder**       | 隐藏激活时的边框       | `boolean`               | -                               | `false` |\n| **leftSpace**        | 左侧空白区域宽度       | `CSSProperties`         | -                               | `12px`  |\n| **onChange**         | 选项卡切换事件         | `(val: string) => void` | -                               | -       |\n| **align**            | 每个子项的横向对齐方式 | `justifyContent`        | -                               | `left`  |\n| **activeClassName**  | 激活子项的类名         | `string`                | -                               | -       |\n| **activeStyles**     | 激活子项的样式内容     | `object`                | -                               | -       |\n| **hoverHeightRatio** | 高亮块与组件的高度比   | `number`                | -                               | 0.7     |\n| **hoverWidthRatio**  | 高亮块与组件的宽度比   | `number`                | -                               | 1.15    |\n| ...                  | 原生属性               | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |\n\n<Attributes.Title alias=\"Tabs.Tab\">Tabs.Item.Props</Attributes.Title>\n\n| 属性              | 描述           | 类型      | 推荐值 | 默认    |\n| ----------------- | -------------- | --------- | ------ | ------- |\n| **label**(必须的) | 选项卡标签文字 | `string`  | -      | -       |\n| **value**(必须的) | 唯一鉴别值     | `string`  | -      | -       |\n| **disabled**      | 禁用当前选项卡 | `boolean` | -      | `false` |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/tag.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tag, Spacer } from 'components'\n\nexport const meta = {\n  title: '标签 Tag',\n  group: '数据展示',\n}\n\n## Tag / 标签\n\n标记文档的状态与功能。\n\n<Playground\n  scope={{ Tag, Spacer }}\n  code={`\n<>\n  <Tag>状态: 不稳定的</Tag>\n  <Spacer />\n  <Tag>作者：佚名</Tag>\n</>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  scope={{ Tag, Spacer }}\n  code={`\n<>\n  <Tag type=\"success\">成功</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"warning\">警告</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"error\">错误</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"secondary\">次要的</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"lite\">精简的</Tag>\n</>\n`}\n/>\n\n<Playground\n  title=\"反转\"\n  desc=\"反转展示背景与主色。\"\n  scope={{ Tag, Spacer }}\n  code={`\n<>\n  <Tag type=\"default\" invert>默认的</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"success\" invert>成功</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"warning\" invert>警告</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"error\" invert>错误</Tag>\n  <Spacer h={.5} />\n  <Tag type=\"secondary\" invert>次要的</Tag>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/tag.mdx\">\n<Attributes.Title>Tag.Props</Attributes.Title>\n\n| 属性       | 描述           | 类型                  | 推荐值                   | 默认      |\n| ---------- | -------------- | --------------------- | ------------------------ | --------- |\n| **type**   | 标签类型       | [TagTypes](#tagtypes) | -                        | `default` |\n| **invert** | 反转背景与主色 | `boolean`             | -                        | `false`   |\n| ...        | 原生属性       | `HTMLAttributes`      | `'id', 'className', ...` | -         |\n\n<Attributes.Title>TagTypes</Attributes.Title>\n\n```ts\ntype TagTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/text.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Text } from 'components'\n\nexport const meta = {\n  title: '文本 Text',\n  group: '通用',\n  index: 10,\n}\n\n## Text / 文本\n\n使用预定义的排版样式显示文本。\n\n<Playground\n  title=\"标题\"\n  scope={{ Text }}\n  code={`\n<Text h1>开始我们的 Geist 之旅。</Text>\n`}\n/>\n\n<Playground\n  title=\"段落\"\n  desc=\"在 `Text` 组件上添加 `p` 与 `b` 以渲染不同元素。\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text p>\n  函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。\n  </Text>\n  <Text p b>\n  函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"较小的\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text small>\n  函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。\n  </Text>\n  <Text small i>\n  函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。\n  </Text>\n</>\n`}\n/>\n\n<Playground\n  title=\"引用\"\n  scope={{ Text }}\n  code={`\n<Text blockquote my={0}>\n  事件能为网页添加真实的交互能力。\n</Text>\n`}\n/>\n\n<Playground\n  title=\"色彩\"\n  desc=\"以不同的色彩区分文字的状态。\"\n  scope={{ Text }}\n  code={`\n<Text b i style={{ letterSpacing: '0.6px' }}>\n  <Text span type=\"success\">G</Text>\n  <Text span type=\"warning\">e</Text>\n  <Text span type=\"secondary\">i</Text>\n  <Text span type=\"error\">s</Text>\n  <Text span style={{ color: '#ccc' }}>t</Text>\n  <Text span type=\"success\" ml=\"5px\">UI</Text>\n</Text>\n`}\n/>\n\n<Playground\n  title=\"组合\"\n  desc=\"多个文本堆叠的效果。\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text p mt={0}>\n  函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。\n  </Text>\n\n  <Text mb={0}>\n    <Text small del>函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。</Text>\n    <Text small b>函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。</Text>\n  </Text>\n</>\n`} />\n\n<Playground\n  title=\"字体大小\"\n  scope={{ Text }}\n  code={`\n<>\n  <Text font=\"12px\" mt={0}>Font Size: 12px;</Text>\n  <Text font=\"14px\">Font Size: 14px;</Text>\n  <Text font=\"1rem\">Font Size: 1rem;</Text>\n  <Text scale={1.25} mb={0}>Font Size Scale: 1.25;</Text>\n</>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/text.mdx\">\n<Attributes.Title>Text.Props</Attributes.Title>\n\n| 属性           | 描述         | 类型             | 推荐值                   | 默认      |\n| -------------- | ------------ | ---------------- | ------------------------ | --------- |\n| **p**          | 渲染元素类型 | `boolean`        | -                        | `true`    |\n| **h1 - h6**    | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **small**      | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **span**       | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **del**        | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **i**          | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **em**         | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **b**          | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **blockquote** | 渲染元素类型 | `boolean`        | -                        | `false`   |\n| **type**       | 文字类型     | `TextTypes`      | [TextTypes](#texttypes)  | `default` |\n| ...            | 原生属性     | `HTMLAttributes` | `'id', 'className', ...` | -         |\n\n<Attributes.Title>TextTypes</Attributes.Title>\n\n```ts\ntype TextTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/textarea.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Textarea, Spacer, useInput, Button, Code } from 'components'\nimport { useState } from 'react'\n\nexport const meta = {\n  title: '文本输入框 Textarea',\n  group: '数据录入',\n}\n\n## Textarea / 文本输入框\n\n获取用户输入的多行文本。\n\n<Playground\n  desc=\"基础示例。\"\n  scope={{ Textarea }}\n  code={`\n<Textarea placeholder=\"请输入一段描述。\" />\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  desc=\"禁用文本框所有交互。\"\n  scope={{ Textarea }}\n  code={`\n<Textarea width=\"100%\" disabled placeholder=\"CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。\" />\n`}\n/>\n\n<Playground\n  title=\"状态\"\n  desc=\"通过色彩区分不同的状态\"\n  scope={{ Textarea, Spacer }}\n  code={`\n<>\n  <Textarea status=\"success\" height=\"65px\" value=\"成功\" />\n  <Spacer w={.5} inline />\n  <Textarea status=\"secondary\" height=\"65px\" value=\"次要的\" />\n  <Spacer h={.5} />\n  <Textarea status=\"warning\" height=\"65px\" value=\"警告\" />\n  <Spacer w={.5} inline />\n  <Textarea status=\"error\" height=\"65px\" value=\"错误\" />\n</>\n`}\n/>\n\n<Playground\n  title=\"事件\"\n  desc=\"捕获文本框的输入事件\"\n  scope={{ Textarea, useState }}\n  code={`\n() => {\n  const [value, setValue] = useState()\n  const handler = (e) => {\n    setValue(e.target.value)\n    console.log(e.target.value)\n  }\n  return (\n    <Textarea width=\"100%\"\n     value={value}\n     onChange={handler}\n     placeholder=\"CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。\" />\n  )\n}\n`}\n/>\n\n<Playground\n  title={\n    <>\n      与&nbsp;<Code>useInput</Code>&nbsp;组合\n    </>\n  }\n  desc=\"通过 `hooks` 以更简单的方式驱动文本框。\"\n  scope={{ Textarea, useInput, Button, Spacer }}\n  code={`\n() => {\n  const { setState, reset, bindings } = useInput('CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。')\n  return (\n    <>\n      <Textarea width=\"100%\" {...bindings}/>\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/3} onClick={() => setState(Math.random().toString(32))}>设置随机文本</Button>\n      <Spacer h={.5} />\n      <Button auto scale={1/3} onClick={() => reset()}>重置文本</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"命令式 API\"\n  desc=\"使用非受控方式更新组件。\"\n  scope={{ Textarea, Spacer, Button }}\n  code={`\n() => {\n  const ref = React.useRef(null)\n  const setChange = () => {\n    ref && (ref.current.value = Math.random().toString(32))\n  }\n  return (\n    <>\n      <Textarea initialValue=\"Hello\" onChange={e => console.log(e.target.value)} ref={ref} />\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/3}\n        onClick={setChange}>设置值</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/textarea.mdx\">\n<Attributes.Title alias=\"Input.Textarea\">Textarea.Props</Attributes.Title>\n\n| 属性             | 描述               | 类型                             | 推荐值                           | 默认      |\n| ---------------- | ------------------ | -------------------------------- | -------------------------------- | --------- |\n| **value**        | 设置文本框的值     | `string`                         | -                                | -         |\n| **initialValue** | 文本框的初始值     | `string`                         | -                                | -         |\n| **placeholder**  | 占位文本           | `string`                         | -                                | -         |\n| **status**       | 文本框当前状态     | `TextareaTypes`                  | [TextareaTypes](#textareatypes)  | `default` |\n| **readOnly**     | 是否以只读方式显示 | `boolean`                        | -                                | `false`   |\n| **disabled**     | 是否禁用文本框     | `boolean`                        | -                                | `false`   |\n| **onChange**     | 文本变化事件       | `(e: React.ChangeEvent) => void` | -                                | -         |\n| **resize**       | CSS 属性           | `CSSResize`                      | [CSSResize](#cssresize)          | `none`    |\n| ...              | 原生属性           | `TextareaHTMLAttributes`         | `'form', 'id', 'className', ...` | -         |\n\n<Attributes.Title>useInput</Attributes.Title>\n\n```ts\ntype useInput = (initialValue: string) => {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  reset: () => void\n  bindings: {\n    value: string\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  }\n}\n```\n\n<Attributes.Title>TextareaTypes</Attributes.Title>\n\n```ts\ntype TextareaTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'\n```\n\n<Attributes.Title>CSSResize</Attributes.Title>\n\n```ts\ntype CSSResize = 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/toast.mdx",
    "content": "import { Layout, Attributes } from 'lib/components'\n\nexport const meta = {\n  title: '通知 Toast',\n  group: '反馈',\n}\n\n## Toast / 通知\n\n通知组件仅支持 Hooks 方式调用，请在 [useToast](/zh-cn/hooks/use-toast 'Toast Hooks') 文档中查看详情。\n\n<Attributes edit=\"/pages/zh-cn/components/toast.mdx\" />\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/toggle.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Toggle, Spacer } from 'components'\n\nexport const meta = {\n  title: '开关 Toggle',\n  group: '数据录入',\n}\n\n## Toggle / 开关\n\n显示布尔值的状态。\n\n<Playground\n  scope={{ Toggle, Spacer }}\n  code={`\n<>\n  <Toggle />\n  <Spacer h={.5} />\n  <Toggle initialChecked />\n</>\n`}\n/>\n\n<Playground\n  title=\"禁用\"\n  scope={{ Toggle, Spacer }}\n  code={`\n<>\n  <Toggle disabled />\n  <Spacer h={.5} />\n  <Toggle initialChecked disabled />\n</>\n`}\n/>\n\n<Playground\n  title=\"获取变化事件\"\n  scope={{ Toggle, Spacer }}\n  code={`\n() => {\n  const handler = event => {\n    console.log(event.target.checked)\n  }\n  return <Toggle onChange={handler} />\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/toggle.mdx\">\n<Attributes.Title>Toggle.Props</Attributes.Title>\n\n| 属性               | 描述           | 类型                  | 推荐值                             | 默认    |\n| ------------------ | -------------- | --------------------- | ---------------------------------- | ------- |\n| **checked**        | 是否选中       | `boolean`             | -                                  | -       |\n| **initialChecked** | 开关的初始状态 | `boolean`             | -                                  | `false` |\n| **onChange**       | 变化事件       | `ToggleEvent`         | -                                  | -       |\n| **disabled**       | 禁用交互       | `boolean`             | -                                  | `false` |\n| ...                | 原生属性       | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | -       |\n\n<Attributes.Title>ToggleEvent</Attributes.Title>\n\n```ts\ninterface ToggleEventTarget {\n  checked: boolean\n}\n\nexport interface ToggleEvent {\n  target: ToggleEventTarget\n  stopPropagation: () => void\n  preventDefault: () => void\n  nativeEvent: React.ChangeEvent\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/tooltip.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Tooltip, Spacer, Grid, Button, Link, Badge, Code, Text } from 'components'\n\nexport const meta = {\n  title: '文字提示 Tooltip',\n  group: '数据展示',\n}\n\n## Tooltip / 文字提示\n\n在悬停时显示额外的提示信息。\n\n<Playground\n  desc=\"基础示例。\"\n  scope={{ Tooltip }}\n  code={`\n<Tooltip text={'缓存是达到高性能的重要组成部分'}>文字提示</Tooltip>\n`}\n/>\n\n<Playground\n  title=\"触发方式\"\n  desc=\"使用点击触发提示框。\"\n  scope={{ Tooltip }}\n  code={`\n<Tooltip text={'缓存是达到高性能的重要组成部分'} trigger=\"click\" type=\"dark\">\n  <span>点击我</span>\n</Tooltip>\n`}\n/>\n\n<Playground\n  title=\"组件组合\"\n  desc=\"与不同的组件组合使用。\"\n  scope={{ Tooltip, Button, Link, Spacer, Badge }}\n  code={`\n<div>\n  <Tooltip text={'缓存是达到高性能的重要组成部分'} type=\"dark\">\n    <Button auto scale={1/2}>按钮</Button>\n  </Tooltip>\n  <Spacer inline x={1} />\n  <Tooltip text={'缓存是达到高性能的重要组成部分'} type=\"dark\">\n    <Badge>1000+</Badge>\n  </Tooltip>\n  <Spacer inline x={1} />\n  <Tooltip text={'缓存是达到高性能的重要组成部分'} type=\"dark\">\n    <Link href=\"#\" color>超链接</Link>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"定制内容\"\n  desc=\"你可以自定义弹出框的内容。\"\n  scope={{ Tooltip, Spacer, Code, Text }}\n  code={`\n<div>\n  <Tooltip text={<>请求中带上 <Code>If-Modified-Since</Code> 来验证缓存。</>}>\n    <span>上方</span>\n  </Tooltip>\n  <Spacer inline x={2.5} />\n  <Tooltip text={<>请求中带上 If-Modified-Since 来<Text b>验证缓存</Text>。</>} placement=\"bottom\">\n    <span>下方</span>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  desc=\"我们为不同的类型预置了样式。\"\n  scope={{ Tooltip, Spacer, Code, Text }}\n  code={`\n<div>\n  <Tooltip text=\"缓存是达到高性能的重要组成部分\" type=\"dark\">\n    <span>黑暗的</span>\n  </Tooltip>\n  <Spacer inline x={1.5} />\n  <Tooltip text=\"缓存是达到高性能的重要组成部分\" type=\"success\">\n    <span>成功</span>\n  </Tooltip>\n  <Spacer inline x={1.5} />\n  <Tooltip text=\"缓存是达到高性能的重要组成部分\" type=\"warning\">\n    <span>警告</span>\n  </Tooltip>\n  <Spacer inline x={1.5} />\n  <Tooltip text=\"缓存是达到高性能的重要组成部分\" type=\"error\">\n    <span>错误</span>\n  </Tooltip>\n  <Spacer inline x={1.5} />\n  <Tooltip text=\"缓存是达到高性能的重要组成部分\" type=\"secondary\">\n    <span>次要的</span>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"变体\"\n  desc=\"特殊样式。\"\n  scope={{ Tooltip, Spacer, Code, Text }}\n  code={`\n<div>\n  <Tooltip text=\"缓存是达到高性能的重要组成部分\" type=\"lite\">\n    <span>精简的</span>\n  </Tooltip>\n  <Spacer inline x={2.5} />\n  <Tooltip text=\"缓存是达到高性能的重要组成部分\" hideArrow>\n    <span>无箭头</span>\n  </Tooltip>\n</div>\n`}\n/>\n\n<Playground\n  title=\"对齐方式\"\n  desc=\"有 12 种对齐方式可用。\"\n  scope={{ Tooltip, Spacer, Grid }}\n  code={`\n() => {\n  const text = 'HTTP is stateless, but not sessionless'\n  return (\n    <Grid.Container gap={1.5} justify=\"center\" alignItems=\"center\">\n      <Grid xs={8} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"topStart\" type=\"dark\">topStart</Tooltip>\n      </Grid>\n      <Grid xs={8} justify=\"center\">\n        <Tooltip text={text} placement=\"top\" type=\"dark\">top</Tooltip>\n      </Grid>\n      <Grid xs={8}>\n        <Tooltip text={text} placement=\"topEnd\" type=\"dark\">topEnd</Tooltip>\n      </Grid>\n      <Grid xs={6} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"leftStart\" type=\"dark\">leftStart</Tooltip>\n      </Grid>\n      <Grid xs={12} />\n      <Grid xs={6}>\n        <Tooltip text={text} placement=\"rightStart\" type=\"dark\">rightStart</Tooltip>\n      </Grid>\n      <Grid xs={6} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"left\" type=\"dark\">left</Tooltip>\n      </Grid>\n      <Grid xs={12} />\n      <Grid xs={6}>\n        <Tooltip text={text} placement=\"right\" type=\"dark\">right</Tooltip>\n      </Grid>\n      <Grid xs={6} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"leftEnd\" type=\"dark\">leftEnd</Tooltip>\n      </Grid>\n      <Grid xs={12} />\n      <Grid xs={6}>\n        <Tooltip text={text} placement=\"rightEnd\" type=\"dark\">rightEnd</Tooltip>\n      </Grid>\n      <Grid xs={8} justify=\"flex-end\">\n        <Tooltip text={text} placement=\"bottomStart\" type=\"dark\">bottomStart</Tooltip>\n      </Grid>\n      <Grid xs={8} justify=\"center\">\n        <Tooltip text={text} placement=\"bottom\" type=\"dark\">bottom</Tooltip>\n      </Grid>\n      <Grid xs={8}>\n        <Tooltip text={text} placement=\"bottomEnd\" type=\"dark\">bottomEnd</Tooltip>\n      </Grid>\n    </Grid.Container>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/tooltip.mdx\">\n<Attributes.Title>Tooltip.Props</Attributes.Title>\n\n| 属性                | 描述                               | 类型                          | 推荐值     | 默认      |\n| ------------------- | ---------------------------------- | ----------------------------- | ---------- | --------- |\n| **text**            | 弹出框文字                         | `string` `React.ReactNode`    | -          | -         |\n| **visible**         | 手动控制提示框的显示与隐藏         | `boolean`                     | -          | `false`   |\n| **initialVisible**  | 初始是否可见                       | `boolean`                     | -          | `false`   |\n| **hideArrow**       | 隐藏箭头                           | `boolean`                     | -          | `false`   |\n| **type**            | 不同的文字提示类型                 | [TooltipTypes](#tooltiptypes) | -          | `default` |\n| **placement**       | 提示框与目标的对齐方式             | [Placement](#placement)       | -          | `top`     |\n| **trigger**         | 触发提示框的方式                   | `'click' / 'hover'`           | -          | `hover`   |\n| **enterDelay**(ms)  | 在提示显示前的延迟                 | `number`                      | -          | `100`     |\n| **leaveDelay**(ms)  | 关闭提示前的延迟 (仅 'hover' 模式) | `number`                      | -          | `150`     |\n| **offset**(px)      | 提示框与目标之间的偏移             | `number`                      | -          | `12`      |\n| **portalClassName** | 弹出框的类名                       | `string`                      | -          | -         |\n| **onVisibleChange** | 当提示框状态改变时触发             | `(visible: boolean) => void`  | -          | -         |\n| ...                 | 原生属性                           | `HTMLAttributes`              | `'id' ...` | -         |\n\n<Attributes.Title>TooltipTypes</Attributes.Title>\n\n```ts\ntype TooltipTypes =\n  | 'default'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'dark'\n  | 'lite'\n```\n\n<Attributes.Title>Placement</Attributes.Title>\n\n```ts\ntype Placement = 'top'\n  | 'topStart',\n  | 'topEnd',\n  | 'left',\n  | 'leftStart',\n  | 'leftEnd',\n  | 'bottom',\n  | 'bottomStart',\n  | 'bottomEnd',\n  | 'right',\n  | 'rightStart',\n  | 'rightEnd',\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/components/user.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { User, Spacer } from 'components'\n\nexport const meta = {\n  title: '用户 User',\n  group: '数据展示',\n}\n\n## User / 用户\n\n展示用户的介绍或是社交链接。\n\n<Playground\n  desc=\"仅展示用户名。\"\n  scope={{ User, Spacer }}\n  code={`\n<User src=\"/images/avatar.png\" name=\"Witt\" />\n`}\n/>\n\n<Playground\n  title=\"描述\"\n  desc=\"在用户名下方展示简短的用户介绍。\"\n  scope={{ User, Spacer }}\n  code={`\n<User src=\"https://unix.bio/assets/avatar.png\" name=\"维特\">\n  JavaScript 工程师\n</User>\n`}\n/>\n\n<Playground\n  title=\"社交\"\n  desc=\"自定义用户的社交链接与文字。\"\n  scope={{ User, Spacer }}\n  code={`\n<User src=\"https://unix.bio/assets/avatar.png\" name=\"Witt\">\n  <User.Link href=\"https://twitter.com/echo_witt\">@echo_witt</User.Link>\n</User>\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/components/user.mdx\">\n<Attributes.Title>User.Props</Attributes.Title>\n\n| 属性             | 描述                        | 类型                   | 推荐值                           | 默认 |\n| ---------------- | --------------------------- | ---------------------- | -------------------------------- | ---- |\n| **name**(必须值) | 用户名                      | `ReactNode` / `string` | -                                | -    |\n| **src**          | 头像图片地址                | `string`               | -                                | -    |\n| **text**         | 以文字方式显示头像          | `string`               | -                                | -    |\n| **altText**      | 内部头像图像使用的 alt 属性 | `string`               | -                                | -    |\n| ...              | 原生属性                    | `HTMLAttributes`       | `'id', 'name', 'className', ...` | -    |\n\n<Attributes.Title>User.Link.Props</Attributes.Title>\n\n| 属性     | 描述     | 类型                   | 推荐值                           | 默认 |\n| -------- | -------- | ---------------------- | -------------------------------- | ---- |\n| **href** | 链接地址 | `string`               | -                                | -    |\n| ...      | 原生属性 | `AnchorHTMLAttributes` | `'id', 'name', 'className', ...` | -    |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/guide/bundle-size.mdx",
    "content": "import Layout from 'lib/components/layout'\n\nexport const meta = {\n  title: '构建体积',\n  group: '快速上手',\n  index: 11,\n}\n\n## 构建体积\n\n一个包含 Geist 所有组件的包大约为 [111kb](https://bundle.js.org/?q=@geist-ui/react) (Gzipped)，对于现代化客户端应用来说这仍旧是不错的大小，\n并不会影响您的应用性能。在工程的实践中，推荐你在应用内将 Geist 切割为独立的 chunk 以获得固定的缓存。\n\n对于更好的首屏加载速度，推荐尝试 [服务端渲染](/zh-cn/guide/server-render)，或是按下所述对构建体积进行优化。\n\n### 自动地 Tree-shaking\n\n对于所有使用 `webpack 5.0` 或更高版本的项目，不需要添加任何额外配置即可获得完整的 tree-shaking。使用 ES 模块引入 Geist，\n在构建时会自动从最终的包中移除未使用的组件。\n\n通常这意味着你的脚手架需要高于以下版本：\n\n- Webpack: `>= 5.0`\n- Next.js: `>= 11.0`\n- React scripts (CRA): `>= 5.0`\n\n#### 推荐的示例\n\n- [CRA with TreeShaking](https://github.com/geist-org/geist-ui/blob/master/examples/tree-shaking-create-react-app/README.md)\n- [Next.js with TreeShaking](https://github.com/geist-org/geist-ui/blob/master/examples/tree-shaking-nextjs/README.md)\n- [Webpack with TreeShaking](https://github.com/geist-org/geist-ui/blob/master/examples/tree-shaking-webpack/README.md)\n\n### 手动引入单个组件\n\n对于非标准的构建工具 (或小型项目)，你可以通过手动引入单个组件来获得更好的构建体积。\n\n手动引入单个组件并不意味着 100% 只构建使用过的组件，一些组件存在内部依赖，如当你进使用 `Snippet` 组件时，最终的包也会包含 `Toast` 组件。\n尽管如此，这类优化方式还是能够显著降低应用的构建体积。\n\n```jsx\nimport Button from '@geist-ui/core/esm/button'\n\nconst MyComponent = () => <Button>Submit</Button>\n```\n\n### 使用 Babel\n\n如果您的项目暂不支持 ES Module，可以使用 Babel 插件降低构建体积。\n\nGeist 遵循自动 Tree Shaking 的命名方案 (社区约定)，这允许你全量引入组件库，但在打包时自动剔除没有真正使用的部分。\n此功能通常需要与 [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import) 工具搭配使用。\n\n一个典型的使用案例需要在 `.babelrc` 文件中添加如下配置：\n\n```json\n// NAME:.babelrc\n{\n  \"plugins\": [\n    [\n      \"import\",\n      {\n        \"libraryName\": \"@geist-ui/core\",\n        \"libraryDirectory\": \"esm\"\n      }\n    ]\n  ]\n}\n```\n\n#### 旧版本可用参考\n\n- [CRA with Babel](https://github.com/geist-org/geist-ui/blob/v2.3.3/examples/tree-shaking-create-react-app/README.md)\n- [Next.js with Babel](https://github.com/geist-org/geist-ui/blob/v2.3.3/examples/tree-shaking-nextjs/README.md)\n- [Webpack with Babel](https://github.com/geist-org/geist-ui/blob/v2.3.3/examples/tree-shaking-webpack/README.md)\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/guide/colors.mdx",
    "content": "import { Code, Display } from 'components'\nimport { Layout, Colors } from 'lib/components'\n\nexport const meta = {\n  title: '色彩',\n  group: '定制化',\n  index: 5,\n}\n\n## 色彩\n\n默认的色彩展示。\n\n### 主要的\n\n你可以在自己的应用中使用这些色彩，所有的色彩值都会跟随主题而变化。\n想要自定义一些颜色？请阅读 [use-theme](/zh-cn/hooks/use-theme) 文档了解更多的细节。\n\n<Display width=\"90%\" caption={<span>从 <Code>useTheme</Code> 函数中获取调色板。</span>}>\n\n```jsx\nimport { useTheme } from '@geist-ui/core'\n\nconst myComponent = () => {\n  const { palette } = useTheme()\n\n  return <p style={{ color: palette.accents_1 }}>myComponent</p>\n}\n```\n\n</Display>\n<Colors type=\"normal\" />\n\n### 状态\n\n使用不同的颜色表达情感的变化。\n\n### 成功\n\n<Colors type=\"success\" />\n\n### 错误\n\n<Colors type=\"error\" />\n\n### 警告\n\n<Colors type=\"warning\" />\n\n### 高亮\n\n<Colors type=\"highlight\" />\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/guide/index.js",
    "content": "import redirect from 'lib/redirect'\n\nexport default redirect('/zh-cn/guide/introduction')\n"
  },
  {
    "path": "pages/zh-cn/guide/installation.mdx",
    "content": "import Layout from 'lib/components/layout'\nimport { Code, Spacer, Dot, Tabs, Snippet, Text } from 'components'\n\nexport const meta = {\n  title: '安装',\n  group: '快速上手',\n  index: 10,\n}\n\n## 安装\n\n### 配置\n\n请确认你的 [NodeJS](https://nodejs.org/zh-cn/download/) 处于最新版本，\n并已有包管理器: [NPM](https://www.npmjs.com/) 或是 [Yarn](https://yarnpkg.com/)。\n\n此外，Geist 是基于 React 框架的组件库，这意味着您也必须了解如何 [创建项目](https://zh-hans.reactjs.org/docs/hello-world.html) 与框架基础知识。\n\n<h4>\n  <Dot type=\"success\">安装依赖</Dot>\n</h4>\n\n<Tabs initialValue=\"yarn\" hideDivider hideBorder align=\"flex-end\" mt=\"-46px\">\n  <Tabs.Item label=\"Yarn\" value=\"yarn\">\n    <Snippet>yarn add @geist-ui/core</Snippet>\n  </Tabs.Item>\n  <Tabs.Item label=\"Npm\" value=\"npm\">\n    <Snippet>npm i @geist-ui/core</Snippet>\n  </Tabs.Item>\n</Tabs>\n<Spacer h={0.5} />\n<h4>\n  <Dot type=\"success\">添加引用</Dot>\n</h4>\n\n```jsx\n// NAME: /src/app.js\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\n\nexport default () => (\n  <GeistProvider>\n    <CssBaseline /> // --> 基础样式\n    <AppComponent /> // --> 你的根组件\n  </GeistProvider>\n)\n```\n\n<Spacer h={0} mb=\"8px\" />\n<h4>\n  <Dot type=\"success\">使用组件</Dot>\n</h4>\n\n```jsx\nimport { Button, Page, Text } from '@geist-ui/core'\n\nconst Home = () => (\n  <Page>\n    <Text h1>Home Page</Text>\n    <Button>Submit</Button>\n  </Page>\n)\n```\n\n### CRA 项目\n\n[create-react-app](https://github.com/facebook/create-react-app) 是创建 React 项目最常见的脚手架，它可以大幅度减少用户配置工具链的时间。\n对于所有 CRA 类项目，用户都不用做任何配置变更，只需引入组件库即可。\n\n此外，这里有一个在 CRA 上使用 Geist 的完整 [项目示例](https://github.com/geist-org/react-getting-started) 供作参考。\n\n### Next.js 项目\n\n[Next.js](https://nextjs.org/) 是一个 React 服务端渲染框架。在 Next.js 上使用 Geist 需要定制 `_app.jsx` 文件，\n项目初始化完成后，可在 `/pages` 文件夹下添加 `/pages/_app.jsx` 文件并补充下述内容。\n\n```jsx\n// NAME:pages/_app.jsx\nimport { GeistProvider, CssBaseline } from '@geist-ui/core'\n\nconst App = ({ Component, pageProps }) => {\n  return (\n    <GeistProvider>\n      <CssBaseline />\n      <Component {...pageProps} />\n    </GeistProvider>\n  )\n}\n\nexport default App\n```\n\n如果你需要在 Next.js 项目中应用服务端渲染，请参考 [服务端渲染](/zh-cn/guide/server-render) 小节完成配置。\n\n此外，我们也提供了一个完整的 [Next.js 应用](https://github.com/geist-org/geist-ui/blob/master/examples/create-next-app/README.md) 示例以供参考。\n\n<Text h3>\n  在 Windows 上渲染字体{' '}\n  <Text span type=\"secondary\" font=\".75em\" style={{ textTransform: 'uppercase' }}>\n    [可选的]\n  </Text>\n</Text>\n\nWeb 应用中的一些字体在 _Windows_ 平台上无法得到最好的渲染效果，\n或是你认为一些字符集没有得到最好的渲染 (如中文字符)，\n在这类场景下，你可以额外引入字体库来优化渲染效果：\n\n> 不需要修改任何 CSS 文件或是声明字体。\n\n#### 安装 `inter-ui`\n\n<Snippet>yarn add inter-ui</Snippet>\n\n#### 添加 `Inter Font` 到你的项目中:\n\n<Code block my={0} width=\"100%\">\n  <span className=\"token keyword module\">import</span>{' '}\n  <span className=\"token string\">'inter-ui/inter.css'</span>\n</Code>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/guide/introduction.mdx",
    "content": "import Layout from 'lib/components/layout'\nimport { Note } from 'components'\n\nexport const meta = {\n  title: '什么是 Geist UI',\n  group: '快速上手',\n  index: 5,\n}\n\n## 介绍\n\n### 关于\n\n**Geist UI** 是一个优雅美观，拥有浓厚 Geek 风格的 React 组件库，\n灵感来自于 [Vercel](https://vercel.com?utm_source=geist-ui&utm_campaign=oss) 的设计风格。\n\n借助 Geist 在文字排版、明暗表达、伸缩组件等诸多别具一格的优势，你可以轻易创建简洁有力的个人站点，\n或是基于高度可定制化设计系统快速构建现代化 Web 应用。\n\n从 [入门指导](/zh-cn/guide/installation) 开始快速上手 Geist 组件，\n或是浏览一个完整地 [项目示例](https://github.com/geist-org/geist-ui/tree/master/examples)。\n\n<Note label=\"\" type=\"warning\">\n  <b>这是一个社区开源项目，与 Vercel 无关联。</b>\n</Note>\n\n### 联系我们\n\n- [报告问题](https://github.com/geist-org/geist-ui/issues/new)\n- 在 [GitHub Discussions](https://github.com/geist-org/geist-ui/discussions) 上提问和解决问题\n- 在 [Slack](https://github.com/geist-org/geist-ui/discussions/572) 频道分享你的作品\n- 我们非常愿意倾听来自任何人有趣的想法与反馈，也欢迎你贡献代码。\n\n### 开源\n\n- [版本发布日志](https://github.com/geist-org/geist-ui/releases)\n- [贡献指南](https://github.com/geist-org/geist-ui/blob/master/.github/CONTRIBUTING.md)\n- [社区行为约束](https://github.com/geist-org/geist-ui/blob/master/.github/CODE_OF_CONDUCT.md)\n- 许可证：[MIT LICENSE](https://github.com/geist-org/geist-ui/blob/master/LICENSE)\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/guide/scale.mdx",
    "content": "import { Layout, Attributes, GridDemo } from 'lib/components'\nimport { Note, Display, Button } from 'components'\n\nexport const meta = {\n  title: '可伸缩性',\n  group: '定制化',\n  index: 20,\n}\n\n## 可伸缩性\n\n<Note type=\"warning\">\n  此功能需要 Geist v2.2.0 或以上版本。如果你正在使用旧版本，请在试用前升级到最新。\n</Note>\n\nGeist UI 的可伸缩特性赋予了每个组件极大的灵活性。你可以自由地缩放组件大小，改写组件局部空间的比例，调整内、外的布局结构等。\n\n这意味着开发者在大多场景下无需入侵组件内部或覆盖样式就能做到高度自定义，甚至能使用基值同步地调整多个组件，\n以极低的代码量兼容不同 Web 结构，在任意布局样式下得到最好的用户体验。\n\n### 按比例缩放\n\n与常见的组件库不同的是，Geist UI 不再使用 `size` 相关属性控制组件大小。每个组件有默认合适的布局体积，\n你可以通过 `scale` 属性动态地缩放组件。\n\n如下所示，`Button` 组件的所有空间占比 (包含字体) 均等比缩小。Geist UI 会通过动态计算组件大小，**真实地渲染指定体积组件**，\n这确保了布局与排版始终与预期相同。\n\n<Display width=\"500px\" caption=\"按 0.5 缩放倍率渲染 Button 组件\">\n  <GridDemo>\n    <Button scale={0.5}>Scale 0.5</Button>\n    <Button>Default</Button>\n  </GridDemo>\n\n```jsx\n<Button scale={0.5}>Scale 0.5</Button>\n<Button>Default</Button>\n```\n\n</Display>\n\n### 固定值\n\n对于任意组件，可伸缩的属性包含宽度、高度、外边距、内边距、字体等，你可以单独定义每个可伸缩属性，一个倍率值或是 CSS 字符串。\n\n<Display width=\"500px\">\n  <GridDemo>\n    <Button font={1.5} width=\"300px\">Full Button</Button>\n  </GridDemo>\n\n```jsx\n<Button width=\"300px\" font={1.5}>\n  Full Button\n</Button>\n```\n\n</Display>\n\n### 缩放单位\n\n组件的空间体积同时取决于用户输入的 `scale` 属性与**缩放单位**，默认的缩放单位为 `16px`，但 Geist UI 允许你在不同层级上自定义此值以达到自定义级别的动态效果。\n\n对于单个组件，我们可以轻松地传递 props 给组件：\n\n```jsx\n// NAME:MyButton.jsx\nexport const MyButton = () => <Button unit=\"2rem\" />\n```\n\n对于同时定义多个组件的*缩放单位 (`unit`)*，你需要创建额外的主题并添加新一层\n`GeistProvider` 作用域，在此作用域下的所有组件都会共享同一个*缩放单位*。(请参考 [主题小节](/zh-cn/guide/themes '主题') 了解自定义主题)\n\n```jsx\n// NAME: src/app.jsx\nconst themeType = 'myTheme'\nconst customUnitTheme = Themes.createFromLight({\n  type: themeType,\n  layout: {\n    unit: '20px',\n  },\n})\nconst App = () => (\n  <GeistProvider themes={[customUnitTheme]} themeType={themeType}>\n    <Button />\n    <Input />\n  </GeistProvider>\n)\n```\n\n### 使用 Scale 开发\n\nGeist 组件库中的 Scale 功能也对外导出，你可以使用此工具创建具备可伸缩功能的组件。\n请阅读 [use-scale](/zh-cn/hooks/use-scale 'use-scale') 文档了解更多。\n\n### 别名\n\n以下是所有可用的属性值与别名参考，`number` 表示可传递数字以缩放，`string` 类型表示可传递 CSS 字符串以固定值。\n\n<Attributes.Table>\n\n| 属性                    | 描述         | 类型           | 默认值 |\n| ----------------------- | ------------ | -------------- | ------ |\n| **scale**               | 缩放比例     | number         | -      |\n| **unit**                | 缩放单位     | string         | `16px` |\n| **width / w**           | 宽度         | string, number | 'auto' |\n| **height / h**          | 高度         | string, number | 'auto' |\n| **font**                | 字体大小     | string, number | -      |\n| **margin**              | 所有外边距   | string, number | `0`    |\n| **marginLeft / ml**     | 外边距，左侧 | string, number  | -      |\n| **marginRight / mr**    | 外边距，右侧 | string, number  | -      |\n| **marginTop / mt**      | 外边距，顶部 | string, number  | -      |\n| **marginBottom / mb**   | 外边距，底部 | string, number  | -      |\n| **padding**             | 所有内边距   | string, number  | `0`    |\n| **paddingLeft / pl**    | 内边距，左侧 | string, number  | -      |\n| **paddingRight / pr**   | 内边距，右侧 | string, number  | -      |\n| **paddingTop / pt**     | 内边距，顶部 | string, number  | -      |\n| **paddingBottom / pb**  | 内边距，底部 | string, number  | -      |\n| **mx**&nbsp;(`ml & mr`) | 外边距，横轴 | string, number  | -      |\n| **my**&nbsp;(`mt & mb`) | 外边距，纵轴 | string, number  | -      |\n| **px**&nbsp;(`pl & pr`) | 内边距，横轴 | string, number  | -      |\n| **py**&nbsp;(`pt & pb`) | 内边距，纵轴 | string, number  | -      |\n\n</Attributes.Table>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/guide/server-render.mdx",
    "content": "import Layout from 'lib/components/layout'\n\nexport const meta = {\n  title: '服务端渲染',\n  group: '快速上手',\n  index: 15,\n}\n\n## 服务端渲染\n\n**所有的 Geist UI 组件**都能完美适应服务端渲染，实际上，你现在所见的文档站点就是来自服务端渲染。\n\n一个常见的 React 组件在服务端被渲染为 HTML 字符串通常包含两部分：HTML 骨架与样式，\n它们共同构成了请求中返回的首个字符串，这能有效的保证用户尽可能早的阅读到页面内容 (而不需要等待额外地 JavaScript 资源加载与解析)。\n\n在 Geist 中，你要做的只是把 Geist 生成的样式文本信息添加到服务端渲染工具中，无论 Next.js 还是自行构建的 HTTP 服务器。\n\n### 使用 Next.js\n\n在 `next.js` 框架中，你首先需要创建 `_document.js` 文件来填充自定义信息，\n请参考 [Next.js](https://nextjs.org/docs/advanced-features/custom-document) 的官方文档了解此文件的影响和意义。\n\n随后我们将以下示例代码加入到文件中：\n\n```js\n// NAME:pages/_document.js\nimport { Fragment } from \"react\"\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\nimport { CssBaseline } from '@geist-ui/core'\n\nclass MyDocument extends Document {\n  static async getInitialProps (ctx) {\n    const initialProps = await Document.getInitialProps(ctx)\n    const styles = CssBaseline.flush()\n\n    return {\n      ...initialProps,\n      styles: [\n        <Fragment key=\"1\">\n          {initialProps.styles}\n          {styles}\n        </Fragment>,\n      ],\n    }\n  }\n\n  render() { ... }\n}\n```\n\n示例中的 `flush` 方法用于收集 Geist 在当前页面中产生的样式，每个项目只需要设置一次。这里也准备了一个完整的 [应用示例](https://github.com/unix/unix.bio/blob/template/pages/_document.tsx) 供作参考。\n\n### 定制服务端\n\n在你自定义的服务端或其他预渲染框架中，你可以通过函数 `CssBaseline.flush` 获取所有样式文本。\n\n```js\nimport React from 'react'\nimport ReactDOM from 'react-dom/server'\nimport { CssBaseline } from 'geist-ui/core'\nimport App from './app'\n\nexport default (req, res) => {\n  const app = ReactDOM.renderToString(<App />)\n  const styles = CssBaseline.flush()\n  const html = ReactDOM.renderToStaticMarkup(\n    <html>\n      <head>{styles}</head>\n      <body>\n        <div id=\"root\" dangerouslySetInnerHTML={{ __html: app }} />\n      </body>\n    </html>,\n  )\n  res.end('<!doctype html>' + html)\n}\n```\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/guide/themes.mdx",
    "content": "import Layout from 'lib/components/layout'\n\nexport const meta = {\n  title: '主题',\n  group: '定制化',\n  index: 10,\n}\n\n## 主题\n\n**Geist UI** 现在支持多种主题，并能以简单易用的方式随意切换或是创建新的主题，不需要任何配置与第三方库。\n作为基础的选项，Geist UI 内置了两种可用的基础主题，`light` 和 `dark` (亮色和暗色)。\n\n### 切换主题\n\n在默认主题之间切换只需要设置 `themeType` 的值即可，你可以参考以下步骤：\n\n1. 确保 `GeistProvider` 与 `CssBaseline` 已经添加至根节点。\n\n2. 更新 `themeType` 的值，所有的组件都会随之自动变化。\n\n```jsx\n// NAME:src/app.js\nimport { CssBaseline, GeistProvider } from '@geist-ui/core'\n\nconst App = () => {\n  const [themeType, setThemeType] = useState('light')\n  const switchThemes = () => {\n    setThemeType(last => (last === 'dark' ? 'light' : 'dark'))\n  }\n  return (\n    <GeistProvider themeType={themeType}>\n      <CssBaseline />\n      <YourComponent onClick={switchThemes} />\n    </GeistProvider>\n  )\n}\n```\n\n### 自定义主题\n\n自定义主题样式在 Geist UI 中非常简单，你只需要提供一个新的样式对象给 `GeistProvider`，所有的组件都会自然变化以适应你自定义的属性。\n这里有一个完整的 [示例项目](https://github.com/geist-org/geist-ui/tree/master/examples/custom-themes) 可供参考。\n\n```jsx\nimport { CssBaseline, GeistProvider, Themes } from '@geist-ui/core'\n\nconst myTheme1 = Themes.createFromLight({\n  type: 'coolTheme',\n  palette: {\n    success: '#000',\n  },\n})\n\nconst App = () => (\n  <GeistProvider themes={[myTheme1]} themeType=\"coolTheme\">\n    <CssBaseline />\n    <YourAppComponent onClick={switchThemes} />\n  </GeistProvider>\n)\n```\n\n方法 `Themes.createFromLight` 允许你在 `light` (亮色主题) 的基础上继承与创建一份新的主题，\n当然，你可以以 `dark` (暗色主题) 为基准创建主题：`Themes.createFromDark`，或是以你自己的、来自社区的主题为基础：\n\n```jsx\nconst myBaseTheme = { ... }\nconst myTheme2 = Themes.create(myBaseTheme, {\n  type: 'myTheme2',\n  palette: {\n    success: '#000',\n  },\n})\n```\n\n### 查看主题的类型\n\n当你修改主题内容时需要参考详细的类型定义，可以浏览已有的 [类型声明文件](https://github.com/geist-org/geist-ui/blob/master/components/themes/presets/index.ts),\n对于已经支持 TypeScript 的项目，可以直接在包内引入类型：\n\n```ts\nimport {\n  GeistUIThemes,\n  GeistUIThemesFont,\n  GeistUIThemesPalette,\n  GeistUIThemesExpressiveness,\n  GeistUIThemesLayout,\n} from '@geist-ui/core'\n\n// 使用示例\nconst myStyles: GeistUIThemes = {\n  /* ... */\n}\nconst myPalette: Partial<GeistUIThemesPalette> = {\n  /* ... */\n}\n```\n\n### 定制化组件\n\n#### ClassName\n\n你可以通过组件上的 `className` 属性重写当前组件的样式。\n\n```jsx\nimport { Button, Row } from '@geist-ui/core'\n\nconst MyPage = () => (\n  <Row>\n    <Button className=\"page-button\">Click me!</Button>\n  </Row>\n)\n\n// in css file:\n.page-button {\n  padding: 0;\n}\n```\n\n#### Inline style\n\n任何行内样式都可以在所有组件上正常的工作。\n\n```jsx\nconst MyPage = () => (\n  <Row>\n    <Button style={{ margin: '20px' }}>Click me!</Button>\n  </Row>\n)\n```\n\n### 构建组件\n\n你可以使用 Geist 预置的 Hooks 获取主题的状态，用于创建属于你的组件。\n了解更多信息，请参考 [useTheme](/zh-cn/hooks/use-theme) 文档。\n\n```jsx\nimport { useTheme } from '@geist-ui/core'\n\nconst MyComponent = () => {\n  const theme = useTheme()\n  return (\n    <div style={{ color: theme.palette.success }}>\n      <span>hello world!</span>\n    </div>\n  )\n}\n```\n\n### Themes APIs\n\n`Themes` 包含了一些静态方法 (纯函数)，这在你自定义主题时会很有用：\n\n- `Themes.create` - 创建一个新主题。\n- `Themes.createFromDark` - 以暗色模式为基础创建新主题。\n- `Themes.createFromLight` - 以亮色模式为基础创建新主题。\n- `Themes.isPresetTheme` - 检查一个主题对象是否来自 Geist UI。\n- `Themes.isAvailableThemeType` - 检查一个主题名是否可用。(是否重复)\n- `Themes.hasUserCustomTheme` - 检查一组主题中是否包含自定义的主题。\n- `Themes.getPresets` - 获取一组由 Geist UI 内置的默认主题。\n- `Themes.getPresetStaticTheme` - 获取一个由 Geist UI 内置的默认主题 (默认加载的)。\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/index.js",
    "content": "import redirect from 'lib/redirect'\n\nexport default redirect('/zh-cn/hooks/use-keyboard')\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-body-scroll.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, Spacer, useBodyScroll, Text } from 'components'\n\nexport const meta = {\n  title: '锁定滚动 useBodyScroll',\n  group: '实用工具',\n}\n\n## useBodyScroll / 工具包\n\n禁用 `Body` 或其他任何元素的滚动，这在显示弹窗或菜单时非常有帮助。\n\n如果容器的滚动条在禁止滚动之前被自定义设置了宽度，那么在在禁止滚动后会为自动当前容器添加 `paddingRight` 作为补偿。\n\n<Playground\n  desc=\"点击按钮以锁定滚动.\"\n  scope={{ Button, Spacer, useBodyScroll, Text }}\n  code={`\n() => {\n  const [hidden, setHidden] = useBodyScroll()\n  return (\n    <>\n      <Text small b type={hidden ? 'error' : 'default'}>{hidden ? '已禁用滚动。' : '当前可以滚动。'}</Text>\n      <Spacer h={.75} />\n      <Button scale={0.5} type=\"success\" auto onClick={() => setHidden(true)}>禁用滚动</Button>\n      <Button ml=\"20px\" scale={0.5} type=\"secondary\" auto onClick={() => setHidden(false)}>重置</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-body-scroll.mdx\">\n<Attributes.Title>useBodyScroll</Attributes.Title>\n\n```ts\ntype BodyScrollOptions = {\n  delayReset: number  //  延迟一段时间后恢复滚动，默认 0\n}\n\nconst useBodyScroll = (\n  elementRef?: RefObject<HTMLElement> | null,\n  options?: BodyScrollOptions,\n) => [boolean, Dispatch<SetStateAction<boolean>>]\n\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-classes.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, useTheme } from 'components'\n\nexport const meta = {\n  title: '类名合并 useClasses',\n  group: '开发者',\n  index: 105,\n}\n\n## useClasses\n\n从技术实现上来说，这不是一个 Hooks，只是借用其命名规范的普通函数。(可以直接用于模板内)\n`useClasses` 可以将字符串、对象、表达式等混合转化为 class-names (字符串)，并且移除其中多余的空格。\n事实上此函数的功能与 [classnames](https://www.npmjs.com/package/classnames) 非常类似，只不过更加简洁和轻量。\n\n之所以要在 _Geist_ 内单独创建一个 Hooks 解决类名合并的问题而不是直接引用社区第三方库，很大一部分考量是来自于体积。\n_Geist_ 组件库内不需要复杂的类名合并、处理多样性的表达式，更多仅用于移除空白字符。如果你正在 Css in JS 的样式解决方案，这会是一个对你非常有帮助的轻量级类名合并工具。\n\n### 基础\n\n移除合并类名时的多个空格字符：\n\n```tsx\nimport { useClasses } from '@geist-ui/core'\n\nexport default ({ className }) => {\n  const myClass = 'button'\n\n  // output -> \"button \"\n  return <div className={`${myClass} ${className}`} />\n\n  // output -> \"button\"\n  return <div className={useClasses(myClass, className)} />\n}\n```\n\n在类名合并的基础上添加表达式：\n\n```tsx\nexport default ({ className }) => {\n  const classes = useClasses('button', isHover ? 'hover' : 'base', className)\n\n  // output -> \"button hover\"\n  // output -> \"button base\"\n  return <div className={classes} />\n}\n```\n\n### 解析对象\n\n对于更加复杂的场景，我们可以用 Hooks 解析一个对象，并将对象的键作为类名：\n\n```tsx\nexport default ({ active, disabled }) => {\n  const classes = useClasses('button', {\n    active,\n    'button-disabled': disabled,\n  })\n\n  // output -> \"button active\"\n  // output -> \"button active button-disabled\"\n  return <div className={classes} />\n}\n```\n\n### 边界\n\n但凡是可以被隐式类型转化为 `false` 的值都会被忽略：\n\n```tsx\nuseClasses('') // output -> \"\"\nuseClasses(null) // output -> \"\"\nuseClasses('btn', undefined) // output -> \"btn\"\nuseClasses({ actived: null }) // output -> \"\"\nuseClasses(0) // output -> \"\"\nuseClasses(false, 'btn', '') // output -> \"btn\"\n```\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-classes.mdx\">\n<Attributes.Title>useClasses</Attributes.Title>\n\n```ts\ntype useClasses = (input: string | Object | null | undefined | boolean | number) => string\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-click-away.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useClickAway, Link, Card, Spacer } from 'components'\n\nexport const meta = {\n  title: '点击他处 useClickAway',\n  group: '实用工具',\n}\n\n## useClickAway / 点击他处触发事件\n\n检测点击事件是否在元素之外。\n\n<Playground\n  desc=\"点击绿色块外部才能触发回调。\"\n  scope={{ useClickAway }}\n  code={`\n() => {\n  const ref = React.useRef()\n  const [count, setCount] = React.useState(0)\n  useClickAway(ref, () => setCount(last => last + 1))\n  return (\n    <div ref={ref} style={{ background: 'green', display: 'flex' }}>\n      <p style={{ fontSize: '2rem' }}>{count}</p>\n    </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-click-away.mdx\">\n<Attributes.Title>useClickAway</Attributes.Title>\n\n```ts\nconst useClickAway = (\n  ref: MutableRefObject<HTMLElement | null>,\n  handler: (event: MouseEvent) => void,\n) => void\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-clipboard.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useClipboard, Link, Button, useToasts, Spacer } from 'components'\n\nexport const meta = {\n  title: '剪切板 useClipboard',\n  group: '实用工具',\n}\n\n## useClipboard / 拷贝至剪切板\n\n拷贝字符串到剪切板。\n\n<Playground\n  scope={{ useClipboard, Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const { copy } = useClipboard()\n  const handler = () => {\n    copy('hello, geist-ui')\n    setToast({ text: '文字已拷贝。' })\n  }\n  return (\n    <Button scale={0.5} auto onClick={handler}>点击拷贝</Button>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-clipboard.mdx\">\n<Attributes.Title>useClipboard</Attributes.Title>\n\n```ts\ntype UseClipboardOptions = {\n  onError: Function\n}\n\ntype CopyResult = {\n  copy: (text: string) => void\n}\n\nconst useClickAway = (options?: UseClipboardOptions) => CopyResult\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-current-state.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useCurrentState, Link, Button, Spacer } from 'components'\n\nexport const meta = {\n  title: '当前值 useCurrentState',\n  group: '开发者',\n  index: 101,\n}\n\n## useCurrentState / 获取当前值\n\n在函数式组件内获取 **最新的值**。默认场景下，React 函数式组件只能获取渲染当时 `state` 的值，这并非是最新的。\n\n这是一个获取最新值的小工具，它在你进行像 `setTimeout` 等异步工作时会非常有用。但如果你喜欢更大的解决方案，\n请试试 <Link target=\"_blank\" color href=\"https://reactjs.org/docs/hooks-reference.html#usereducer\">useReducer</Link>。\n\n这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target=\"_blank\" color href=\"https://reactjs.org/docs/hooks-rules.html\">钩子的基础规则</Link>。\n\n<Playground\n  scope={{ useCurrentState, Button }}\n  code={`\n() => {\n  const [value, setValue] = React.useState(0)\n  const [value2, setValue2, value2Ref] = useCurrentState(0)\n  const handler = () => {\n    setValue(pre => pre + 1)\n    setValue2(pre => pre + 1)\n    const str = \\`渲染时的值: \\${value}， 最新的值: \\${value2Ref.current}\\`\n    alert(str)\n  }\n  return (\n    <Button scale={0.5} auto onClick={handler}>点击显示</Button>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-current-state.mdx\">\n<Attributes.Title>useCurrentState</Attributes.Title>\n\n```ts\ntype CurrentStateType<S> = [\n  S,\n  Dispatch<SetStateAction<S>>,\n  MutableRefObject<S>,\n]\n\nconst useCurrentState<S> = (\n  initialState: S | () => S,\n) => CurrentStateType<S>\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-input.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useInput, Input, Button, Spacer } from 'components'\n\nexport const meta = {\n  title: '输入框绑定 useInput',\n  group: '组件增强',\n  index: 10,\n}\n\n## useInput / 输入框绑定\n\n`useInput` 提供对 [Input](/zh-cn/components/input) 组件的自动绑定功能，这可以有效减少模板代码量并提高开发者体验。\n使用此 Hooks 与你手动添加 `React.useState` 以绑定组件的行为完全一致。\n\n<Playground\n  desc=\"使用 Hooks 捕获数据变化\"\n  scope={{ Input, useInput, Button, Spacer }}\n  code={`\n() => {\n  const { state, setState, reset, bindings } = useInput('Geist UI')\n  React.useEffect(() => console.log(state), [state])\n  return (\n    <>\n      <Input {...bindings} />\n      <Spacer h={.5} />\n      <Button auto type=\"secondary\" scale={1/2} onClick={() => setState(Math.random().toString(32))}>设置值</Button>\n      <Button auto scale={1/2} ml=\"20px\" onClick={() => reset()}>重置</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-input.mdx\">\n<Attributes.Title>useInput</Attributes.Title>\n\n```ts\ntype useInput = (initialValue: string) => {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  reset: () => void\n  bindings: {\n    value: string\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  }\n}\n```\n\n<Attributes.Title>KeyboardOptions</Attributes.Title>\n\n| 参数           | 介绍                   | 类型         |\n| -------------- | ---------------------- | ------------ |\n| **state**      | Input 组件的值         | `string`     |\n| **setState**   | 与 React.setState 相同 | -            |\n| **currentRef** | Input 组件的当前值     | `string`     |\n| **reset**      | 重置为初始值           | `() => void` |\n| **bindings**   | 自动绑定对象           | -            |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-keyboard.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useKeyboard, KeyCode, KeyMod, Keyboard, Input, Link } from 'components'\n\nexport const meta = {\n  title: '键盘事件 useKeyboard',\n  group: '组件增强',\n  index: 5,\n}\n\n## useKeyboard / 键盘事件\n\n用户监听多个键盘事件的钩子。\n\n<Playground\n  desc=\"全局的键盘事件。\"\n  scope={{ useKeyboard, KeyCode, KeyMod, Keyboard }}\n  code={`\n() => {\n  useKeyboard(\n    () => alert('保存成功！'),\n    [KeyCode.KEY_S, KeyMod.CtrlCmd]\n  )\n  return <div>按下 <Keyboard command scale={0.5}>S</Keyboard> 以保存。</div>\n}\n`}\n/>\n\n<Playground\n  title=\"元素事件\"\n  desc=\"只在指定元素上监听元素事件。\"\n  scope={{ useKeyboard, KeyCode, KeyMod, Keyboard, Input }}\n  code={`\n() => {\n  const { bindings } = useKeyboard(\n    () => alert('A 是不被允许的'),\n    [KeyCode.KEY_A],\n    { disableGlobalEvent: true },\n  )\n  return (\n  <div>\n    <p>键盘事件只在输入框被触发后才会响应。</p>\n    <Input {...bindings} placeholder=\"输入 A\" />\n  </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-keyboard.mdx\">\n<Attributes.Title>useKeyboard</Attributes.Title>\n\n```ts\ntype KeyboardOptions = {\n  disableGlobalEvent: boolean,\n  stopPropagation: boolean\n  preventDefault: boolean\n  capture: boolean\n  event: 'keydown' | 'keypress' | 'keyup'\n}\n\nconst useKeyboard = (\n  handler: (event: React.KeyboardEvent) => void,\n  keyBindings: Array<number> | number,\n  options?: KeyboardOptions,\n) => void\n```\n\n<Attributes.Title>KeyboardOptions</Attributes.Title>\n\n| 参数                   | 描述                             | 类型      | 推荐值                           | 默认      |\n| ---------------------- | -------------------------------- | --------- | -------------------------------- | --------- |\n| **disableGlobalEvent** | 禁止监听来自 Document 的全局事件 | `boolean` | -                                | `false`   |\n| **stopPropagation**    | 停止事件传播                     | `boolean` | -                                | `false`   |\n| **preventDefault**     | 阻止事件的默认行为               | `boolean` | -                                | `true`    |\n| **capture**            | 设置事件类型为捕获               | `boolean` | -                                | `false`   |\n| **event**              | 键盘事件的类型                   | `string`  | `'keydown', 'keypress', 'keyup'` | `keydown` |\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-media-query.mdx",
    "content": "import { Layout, Playground, PlaygroundTitle, Attributes } from 'lib/components'\nimport { useMediaQuery, Link, Code, Spacer } from 'components'\nimport NextLink from 'next/link'\n\nexport const meta = {\n  title: '媒体查询 useMediaQuery',\n  group: '实用工具',\n}\n\n## useMediaQuery / 媒体查询\n\n用于 CSS 媒体查询的钩子，钩子通过 `MediaQuery` API 实现。如果你仅仅想要构建响应式的布局，\n请尝试 <NextLink href=\"/zh-cn/components/grid\"><Link color>栅格组件</Link></NextLink>。\n\n<Playground\n  scope={{ useMediaQuery, Code }}\n  code={`\n() => {\n  const isXS = useMediaQuery('xs')\n  const isSM = useMediaQuery('sm')\n  const isMD = useMediaQuery('md')\n  const isLG = useMediaQuery('lg')\n  const isXL = useMediaQuery('xl')\n  return (\n    <>\n      媒体查询当前匹配: <Code>{isXS && 'xs'}{isSM && 'sm'}{isMD && 'md'}{isLG && 'lg'}{isXL && 'xl'}</Code>.\n    </>\n  )\n}\n`}\n/>\n\n<Playground\n  title=\"匹配类型\"\n  desc=\"你可以选择向上或是向下匹配媒体查询。\"\n  scope={{ useMediaQuery, Code }}\n  code={`\n() => {\n  const upMD = useMediaQuery('md', { match: 'up' })\n  return (\n    <>\n      当前屏幕宽度 <b>{upMD ? '大于' : '小于'}</b> <Code>md</Code>.\n    </>\n  )\n}\n`}\n/>\n\n<PlaygroundTitle\n  title=\"定制断点\"\n  desc=\"您可以覆盖 `@geist-ui/core` 组件库默认的断点值。\"\n/>\n\n```tsx\nconst breakpoints: GeistUIThemesBreakpoints = {\n  xs: { min: '0', max: '650px' },\n  sm: { min: '650px', max: '900px' },\n  md: { min: '900px', max: '1280px' },\n  lg: { min: '1280px', max: '1920px' },\n  xl: { min: '1920px', max: '10000px' },\n}\n\nconst App = () => {\n  const myTheme = Themes.createFromLight({\n    type: 'myTheme',\n    breakpoints,\n  })\n  return (\n    <GeistProvider themes={[myTheme]} themeType=\"myTheme\">\n      <CssBaseline />\n      <AppComponent />\n    </GeistProvider>\n  )\n}\n```\n\n<Attributes edit=\"/pages/zh-cn/components/use-media-query.mdx\">\n<Attributes.Title>useMediaQuery</Attributes.Title>\n\n```ts\ntype ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'mobile'\n\ntype ResponsiveOptions = {\n  match?: 'up' | 'down'\n  ssrMatchMedia?: (query: string) => { matches: boolean }\n}\n\nconst useMediaQuery = (breakpoint: ResponsiveBreakpoint, options?: ResponsiveOptions) =>\n  boolean\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-modal.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useModal, Modal, Button } from 'components'\n\nexport const meta = {\n  title: '对话框绑定 useModal',\n  group: '组件增强',\n  index: 11,\n}\n\n## useModal / 对话框绑定\n\n`useModal` 提供对 [Modal](/zh-cn/components/modal) 组件的自动绑定功能，这可以有效减少模板代码量并提高开发者体验。\n使用此 hooks 与你手动添加 `React.useState` 以绑定组件的行为完全一致。\n\n此工具额外支持绑定 [Select 组件](/zh-cn/components/select 'Select 组件')。\n\n<Playground\n  desc=\"使用 Hooks 控制 `Modal` 组件\"\n  scope={{ Modal, Button, useModal }}\n  code={`\n() => {\n  const { visible, setVisible, bindings } = useModal()\n  return (\n    <>\n      <Button auto onClick={() => setVisible(true)}>打开对话框</Button>\n      <Modal {...bindings}>\n        <Modal.Title>标题</Modal.Title>\n        <Modal.Subtitle>这是副标题</Modal.Subtitle>\n        <Modal.Content>\n          <p>对话框的主体内容</p>\n        </Modal.Content>\n        <Modal.Action passive onClick={() => setVisible(false)}>取消</Modal.Action>\n        <Modal.Action>提交</Modal.Action>\n      </Modal>\n    </>\n  )\n}`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-modal.mdx\" >\n<Attributes.Title>useModal</Attributes.Title>\n\n```ts\ntype useModal = (initialVisible: boolean) => {\n  visible: boolean\n  setVisible: Dispatch<SetStateAction<boolean>>\n  setVisible: Dispatch<SetStateAction<boolean>>\n  currentRef: MutableRefObject<boolean>\n  bindings: {\n    visible: boolean\n    onClose: () => void\n  }\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-scale.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, useTheme } from 'components'\n\nexport const meta = {\n  title: '自定义缩放 useScale',\n  group: '开发者',\n  index: 103,\n}\n\n## useScale / 自定义缩放\n\nRemember the elastic scaling feature mentioned in the [scale](/zh-cn/guide/scale 'Scale') subsection,\nwhich gave the Geist components amazing imagination and extensibility,\nand now you can add elastic scaling features to your own components with the help of the `useScale` hooks.\n\n### Scale the width\n\nAs a first example, let's prepare a simple component with a fixed width:\n\n```tsx\nconst MyComponent = ({ width: string = '20px' }) => {\n  return <div style={{ width }}>Scale Component</div>\n}\n```\n\nAlthough the component accepts a `string` parameter to define the `width`, we can't control the multiplier of the width,\nsay `1.35` times the width, unless it's manually calculated and then filled in, which seems fine,\nbut when our component can set more than 10 styles, the calculation of these values is very tedious.\n\nNow we try to bind the component to the scale of Geist:\n\n```tsx\nimport { withScale, useScale } from '@geist-ui/core'\n\nconst MyComponent = () => {\n  const { SCALES } = useScale()\n  return <div style={{ width: SCALES.width(1.25) }}>Scale Component</div>\n}\n\nexport default withScale(MyComponent)\n```\n\n`withScale` can transform any component into a dynamically scaled component and automatically **add props and types** to the component.\nYou just need to set `useScale` within the component to get the `SCALES`, and then add the bindings for the `SCALES` for each style.\n\nThe default unit of Scale is `16px`, when we need to set the default width to `20px`, Obviously `20px` is 1.25 times more than `16px`,\nso we get `SCALES.width(1.25)`.\n\nThe components of the above example should be used as follows:\n\n```tsx\n<MyComponent width={0.5} />\n<MyComponent width=\"10px\" />\n<MyComponent width=\"auto\" />\n<MyComponent unit=\"10rem\" />\n```\n\n### Unconventional defaults\n\nIn a few components where we want the default width to be `auto` (or others), and allow user-defined `width` to override this value,\nthen within the Scale component we want to follow the following rules:\n\n- When the initial value is a special character (`initial` etc.), the component cannot be scaled by a factor of.\n- The user can still override the initial value with the specified value.\n\nFor a simple component, the following example can be used to illustrate:\n\n```tsx\nconst MyComponent = () => {\n  const { SCALES } = useScale()\n  return <div style={{ width: SCALES.width(1, 'auto') }}>Fixed Component</div>\n}\n\nexport default withScale(MyComponent)\n```\n\nWhen we use this component, the width cannot be scaled by a multiple anymore:\n\n```tsx\n<MyComponent width={0.1} />\n\n// -> The width is still \"auto\"\n// -> \"auto\" cannot be calculated mathematically\n```\n\nWhen we enter specific values to override, it still works well:\n\n```tsx\n<MyComponent width=\"100px\" />\n\n// -> The width is \"100px\"\n```\n\n### Get native props\n\nWhen a component is combined with `withScale`, multiple props and corresponding types are automatically added,\nwe can use the `useScale` function to get the corresponding value.\nNote, however, that the value obtained from the `useScale` function is computed, not the native value.\n\n```tsx\nconst MyComponent = () => {\n  const { SCALES } = useScale()\n\n  console.log(SCALES.width(1))\n\n  return null\n}\n\n<MyComponent width={2} />  // output -> 'calc(2 * 16px)'\n<MyComponent />            // output -> '16px'\n```\n\nThe value obtained from `SCALES.width` is not exactly equal to the user input (`width=`),\nbecause we want to make sure that the component works even if the user does nothing.\nSo, if you need to get the **native value** of the user input, use a separate function to get:\n\n```ts\nconst MyComponent = () => {\n  const { getScaleProps } = useScale()\n\n  console.log(getScaleProps('width'))\n\n  return null\n}\n\n<MyComponent width={2} />     // output -> 2\n<MyComponent width=\"20px\" />  // output -> '20px'\n<MyComponent />               // output -> undefined\n```\n\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-scale.mdx\">\n<Attributes.Title>withScale</Attributes.Title>\n\n```ts\ntype withScale = (Render: React.ComponentType) => React.ComponentType\n```\n\n<Attributes.Title>useScale</Attributes.Title>\n\n```ts\ntype useScale = () => ScaleConfig\n\ntype ScaleConfig = {\n  SCALES: DynamicScales\n  // Get the native value of scale prop\n  getScaleProps: GetScalePropsFunction\n  // Base value of the current component\n  unit: string\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-tabs.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useTabs, Tabs, Button, Spacer } from 'components'\n\nexport const meta = {\n  title: '选项卡绑定 useTabs',\n  group: '组件增强',\n  index: 11,\n}\n\n## useTabs / 选项卡绑定\n\n`useTabs` 提供对 [Tabs](/zh-cn/components/tabs) 组件的自动绑定功能，这可以有效减少模板代码量并提高开发者体验。\n使用此 Hooks 与你手动添加 `React.useState` 以绑定组件的行为完全一致。\n\n<Playground\n  desc=\"使用 Hooks 控制组件与捕获变化。\"\n  scope={{ Tabs, Button, Spacer, useTabs }}\n  code={`\n() => {\n  const { setState, bindings } = useTabs('1')\n  return (\n    <>\n      <Button scale={1/3} font=\"12px\" onClick={() => setState('2')}>\n        To Extensible\n      </Button>\n      <Spacer h={.5} />\n      <Tabs {...bindings}>\n        <Tabs.Item label=\"stateless\" value=\"1\">HTTP is stateless, but not sessionless.</Tabs.Item>\n        <Tabs.Item label=\"extensible\" value=\"2\">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>\n      </Tabs>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-tabs.mdx\" >\n<Attributes.Title>useTabs</Attributes.Title>\n\n```ts\ntype useTabs = (initialValue: string) => {\n  state: string\n  setState: Dispatch<SetStateAction<string>>\n  currentRef: MutableRefObject<string>\n  bindings: {\n    value: string\n    onChange: (val: string) => void\n  }\n}\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-theme.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { Button, useTheme } from 'components'\n\nexport const meta = {\n  title: '主题的状态 useTheme',\n  group: '开发者',\n  index: 100,\n}\n\n## useTheme / 主题的状态\n\n此 Hooks 可以帮助用户在任意组件中获取主题状态，同时追踪状态的变化。在默认场景下 (没有改变 `themeType` 时)，\nHooks 获取的值与 `Themes.getPresets` 是相同的。\n\n通常来自 Geist 的组件已在内部预置了这些状态跟踪，你不需要改变它们。此 Hooks 只是帮助你使用 Geist 主题样式创建自己的组件。\n\n注意下面的例子，当我们使用 Theme 定义组件后，自定义组件的样式属性将指向 Geist 的主题，在当前网站的右上角切换主题后，\n你会发现例子中组件的颜色将总是跟随 Geist 主题而变化。\n\n<Playground\n  scope={{ useTheme, Button }}\n  desc=\"\"\n  code={`\n() => {\n  const theme = useTheme()\n  return (\n    <div style={{\n        width: '200px',\n        height: '50px',\n        borderRadius: theme.layout.radius,\n        background: theme.palette.accents_2\n      }}\n    >\n      <span style={{\n          color: theme.palette.accents_7,\n          paddingLeft: theme.layout.gapQuarter\n        }}\n      >我的第一个组件。</span>\n    </div>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-theme.mdx\">\n<Attributes.Title>useTheme</Attributes.Title>\n\n```ts\nconst theme: GeistUIThemes = useTheme()\n\nexport type GeistUIThemes = {\n  type: string\n  font: GeistUIThemesFont\n  layout: GeistUIThemesLayout\n  palette: GeistUIThemesPalette\n  breakpoints: GeistUIThemesBreakpoints\n  expressiveness: GeistUIThemesExpressiveness\n}\n```\n\n<Attributes.Title>获取预置的类型</Attributes.Title>\n\n```ts\nimport {\n  GeistUIThemes,\n  GeistUIThemesFont,\n  GeistUIThemesPalette,\n  GeistUIThemesExpressiveness,\n  GeistUIThemesLayout,\n} from '@geist-ui/core'\n\nconst myFontTheme: GeistUIThemesFont = { }\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/hooks/use-toast.mdx",
    "content": "import { Layout, Playground, Attributes } from 'lib/components'\nimport { useToasts, Button, Spacer, Link } from 'components'\n\nexport const meta = {\n  title: '通知 useToast',\n  group: '组件增强',\n  index: 12,\n}\n\n## useToast / 通知\n\n显示重要的全局通知信息。\n\n<Playground\n  desc=\"基础示例。\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = () => setToast({ text: '你正在浏览文档站点。' })\n  return <Button scale={2/3} auto onClick={click}>显示通知</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"多行\"\n  desc=\"显示多行或过长的文本。\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = () => setToast({ text: 'CSS是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”' })\n  return <Button scale={2/3} auto onClick={click}>显示通知</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"动作\"\n  desc=\"在通知中附加一个按钮。\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const action = {\n    name: '点击我',\n    handler: () => alert('由 Toast / 通知组件触发。')\n  }\n  const click = () => setToast({\n    text: '我正在浏览文档站点。',\n    actions: [action],\n  })\n  return <Button scale={2/3} auto onClick={click} type=\"secondary\">显示通知</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"取消\"\n  desc=\"使用 `passive` (消极地) 改变按钮的状态与样式。\"\n  scope={{ Button, useToasts }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const action = {\n    name: '取消',\n    passive: true,\n    handler: (event, cancel) => cancel()\n  }\n  const click = () => setToast({\n    text: '我正在浏览文档站点。',\n    actions: [action],\n  })\n  return <Button scale={2/3} auto onClick={click}>显示通知</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"自定义模板\"\n  desc=\"以 `ReactNode` 代替字符串展示更丰富的信息。\"\n  scope={{ Button, useToasts, Link }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = () => setToast({\n    text: <p>点击此<Link target=\"_blank\" color block href=\"https://github.com/geist-org/geist-ui\">链接</Link>了解更多信息</p>,\n    delay: 4000,\n  })\n  return <Button scale={2/3} auto onClick={click}>显示通知</Button>\n}\n`}\n/>\n\n<Playground\n  title=\"类型\"\n  scope={{ Button, useToasts, Spacer }}\n  code={`\n() => {\n  const { setToast } = useToasts()\n  const click = type => setToast({\n    text: '我正在浏览文档站点。',\n    type,\n  })\n  return (\n    <>\n    <Button scale={2/3} auto onClick={() => click('success')} type=\"success\">显示成功状态</Button>\n    <Spacer inline x={.5} />\n    <Button scale={2/3} auto onClick={() => click('warning')} type=\"warning\">显示警告状态</Button>\n    </>\n  )\n}\n`}\n/>\n\n<Attributes edit=\"/pages/zh-cn/hooks/use-toast.mdx\">\n<Attributes.Title>useToasts</Attributes.Title>\n\n```ts\nconst {\n  // 当前 DOM 中所有可用实例\n  toasts: Array<Toast>\n\n  // 创建一个立即显示的通知\n  setToast: (toast: ToastInput) => void\n\n  // 立刻隐藏所有的通知\n  removeAll: () => void\n\n  // 按 ID 查询指定的实例\n  findToastOneByID: (ident: string) => Toast | undefined\n\n  // 按 ID 移除一个指定通知\n  removeToastOneByID: (ident: string) => void\n} = useToasts(layout: ToastLayout)\n```\n\n<Attributes.Title>ToastLayout</Attributes.Title>\n\n| 参数          | 描述           | 类型                              | 默认值        |\n| ------------- | -------------- | --------------------------------- | ------------- |\n| **padding**   | 通用 CSS 属性  | `string`                          | -             |\n| **margin**    | 通用 CSS 属性  | `string`                          | -             |\n| **width**     | 通用 CSS 属性  | `string`                          | -             |\n| **maxWidth**  | 通用 CSS 属性  | `string`                          | `90vw`        |\n| **maxHeight** | 通用 CSS 属性  | `string`                          | `75px`        |\n| **placement** | 组件弹出的位置 | [ToastPlacement](#toastplacement) | `bottomRight` |\n\n<Attributes.Title>ToastInput</Attributes.Title>\n\n| 参数        | 描述                    | 类型                        | 默认值    |\n| ----------- | ----------------------- | --------------------------- | --------- |\n| **id**      | 唯一识别 ID，可自动生成 | `string`                    | -         |\n| **text**    | 组件内显示的信息        | `string`, `ReactNode`       | -         |\n| **type**    | 组件的样式类型          | [ToastTypes](#toasttypes)   | `default` |\n| **delay**   | 自动关闭前等待的时间    | `number`                    | `2000`    |\n| **actions** | 指定一个默认的动作      | [ToastAction](#toastaction) | -         |\n\n<Attributes.Title>ToastPlacement</Attributes.Title>\n\n```ts\ntype ToastPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'\n```\n\n<Attributes.Title>ToastAction</Attributes.Title>\n\n```ts\ninterface ToastAction {\n  name: string\n  handler: (event: React.MouseEventHandler<HTMLButtonElement>, cancel: Function) => void\n  passive?: boolean\n}\n```\n\n<Attributes.Title>ToastTypes</Attributes.Title>\n\n```ts\ntype ToastTypes = 'default' \\| 'secondary' | 'success' | 'warning' | 'error'\n```\n\n</Attributes>\n\nexport default ({ children }) => <Layout meta={meta}>{children}</Layout>\n"
  },
  {
    "path": "pages/zh-cn/index.tsx",
    "content": "import React from 'react'\nimport { NextPage } from 'next'\nimport { useTheme, Grid } from 'components'\nimport PackageIcon from '@geist-ui/icons/package'\nimport FeatherIcon from '@geist-ui/icons/feather'\nimport GitHubIcon from '@geist-ui/icons/github'\nimport { HomeCell } from 'lib/components'\n\nconst Home: NextPage<unknown> = () => {\n  const theme = useTheme()\n\n  return (\n    <>\n      <div className=\"layout\">\n        <div className=\"hero\">\n          <h1 className=\"title\">Geist</h1>\n          <h3 className=\"desc\">一个用于构建现代 Web 应用的开源设计系统</h3>\n        </div>\n        <Grid.Container gap={2} justify=\"center\">\n          <Grid xs={24} md={8}>\n            <HomeCell\n              icon={<PackageIcon />}\n              url=\"/zh-cn/components\"\n              title=\"Components\"\n              desc=\"Ever-increasing list of concise and aesthetic components.\"\n            />\n          </Grid>\n          <Grid xs={24} md={8}>\n            <HomeCell\n              icon={<FeatherIcon />}\n              url=\"/zh-cn/guide/themes\"\n              title=\"Customizable\"\n              desc=\"Configure sizes, colors, appearances, shapes, and more.\"\n            />\n          </Grid>\n          <Grid xs={24} md={8}>\n            <HomeCell\n              icon={<GitHubIcon />}\n              url=\"https://github.com/geist-org/geist-ui\"\n              title=\"Open Sourced\"\n              desc=\"Geist is open sourced and available free under MIT licence.\"\n            />\n          </Grid>\n        </Grid.Container>\n      </div>\n      <style jsx>{`\n        .layout {\n          min-height: calc(100vh - var(--geist-page-nav-height));\n          max-width: ${theme.layout.pageWidthWithMargin};\n          margin: 0 auto;\n          padding: 0 ${theme.layout.gap} calc(${theme.layout.gap} * 2);\n          box-sizing: border-box;\n        }\n        .hero {\n          height: calc(100vh - var(--geist-page-nav-height) - 300px);\n          min-height: 30vh;\n          max-width: 100%;\n          margin: 0 auto;\n          text-align: center;\n          align-items: center;\n          justify-content: center;\n          display: flex;\n          flex-direction: column;\n        }\n        .title {\n          font-size: 3.75rem;\n          font-weight: 700;\n          margin: 0;\n        }\n        .desc {\n          color: ${theme.palette.accents_5};\n          font-size: 1.5rem;\n          font-weight: 500;\n          margin: 0 0 ${theme.layout.gap};\n        }\n      `}</style>\n    </>\n  )\n}\n\nexport default Home\n"
  },
  {
    "path": "public/_redirects",
    "content": "/powered-by-netlify https://www.netlify.com/?utm_source=github&utm_medium=geist-ui\n/move-to-core https://github.com/geist-org/geist-ui/discussions/677\n"
  },
  {
    "path": "scripts/babel.config.js",
    "content": "module.exports = {\n  presets: [\n    [\n      '@babel/env',\n      {\n        bugfixes: true,\n        modules: false,\n      },\n    ],\n    '@babel/react',\n    '@babel/typescript',\n  ],\n  plugins: [\n    'styled-jsx/babel',\n    ['@babel/plugin-proposal-object-rest-spread', { loose: true }],\n    ['@babel/plugin-transform-runtime', { useESModules: true }],\n    [\n      'transform-rename-import',\n      {\n        replacements: [\n          { original: 'styled-jsx/style', replacement: '../styled-jsx.es.js' },\n          { original: 'styled-jsx/server', replacement: '../styled-jsx-server.es.js' },\n        ],\n      },\n    ],\n  ],\n\n  ignore: [/@babel[\\\\|/]runtime/],\n}\n"
  },
  {
    "path": "scripts/built-in/styled-jsx-server.es.js",
    "content": "import { server } from './styled-jsx.es'\nconst { flushToHTML } = server\n\nexport { server, flushToHTML }\nexport default server\n"
  },
  {
    "path": "scripts/built-in/styled-jsx.cjs.js",
    "content": "'use strict'\n\nvar React = require('react')\n\nfunction _interopDefaultLegacy(e) {\n  return e && typeof e === 'object' && 'default' in e ? e : { default: e }\n}\n\nvar React__default = /*#__PURE__*/ _interopDefaultLegacy(React)\n\nvar style$1 = {}\n\nvar stylesheetRegistry = {}\n\nfunction hash(str) {\n  var hash = 5381,\n    i = str.length\n\n  while (i) {\n    hash = (hash * 33) ^ str.charCodeAt(--i)\n  }\n\n  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed\n   * integers. Since we want the results to be always positive, convert the\n   * signed int to an unsigned by doing an unsigned bitshift. */\n  return hash >>> 0\n}\n\nvar stringHash = hash\n\nvar stylesheet = {}\n\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = void 0\n\n  function _defineProperties(target, props) {\n    for (var i = 0; i < props.length; i++) {\n      var descriptor = props[i]\n      descriptor.enumerable = descriptor.enumerable || false\n      descriptor.configurable = true\n      if ('value' in descriptor) descriptor.writable = true\n      Object.defineProperty(target, descriptor.key, descriptor)\n    }\n  }\n\n  function _createClass(Constructor, protoProps, staticProps) {\n    if (protoProps) _defineProperties(Constructor.prototype, protoProps)\n    if (staticProps) _defineProperties(Constructor, staticProps)\n    return Constructor\n  }\n\n  /*\nBased on Glamor's sheet\nhttps://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js\n*/\n  var isProd =\n    typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production'\n\n  var isString = function isString(o) {\n    return Object.prototype.toString.call(o) === '[object String]'\n  }\n\n  var StyleSheet = /*#__PURE__*/ (function () {\n    function StyleSheet(_temp) {\n      var _ref = _temp === void 0 ? {} : _temp,\n        _ref$name = _ref.name,\n        name = _ref$name === void 0 ? 'stylesheet' : _ref$name,\n        _ref$optimizeForSpeed = _ref.optimizeForSpeed,\n        optimizeForSpeed =\n          _ref$optimizeForSpeed === void 0 ? isProd : _ref$optimizeForSpeed,\n        _ref$isBrowser = _ref.isBrowser,\n        isBrowser =\n          _ref$isBrowser === void 0 ? typeof window !== 'undefined' : _ref$isBrowser\n\n      invariant(isString(name), '`name` must be a string')\n      this._name = name\n      this._deletedRulePlaceholder = '#' + name + '-deleted-rule____{}'\n      invariant(\n        typeof optimizeForSpeed === 'boolean',\n        '`optimizeForSpeed` must be a boolean',\n      )\n      this._optimizeForSpeed = optimizeForSpeed\n      this._isBrowser = isBrowser\n      this._serverSheet = undefined\n      this._tags = []\n      this._injected = false\n      this._rulesCount = 0\n      var node = this._isBrowser && document.querySelector('meta[property=\"csp-nonce\"]')\n      this._nonce = node ? node.getAttribute('content') : null\n    }\n\n    var _proto = StyleSheet.prototype\n\n    _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) {\n      invariant(typeof bool === 'boolean', '`setOptimizeForSpeed` accepts a boolean')\n      invariant(\n        this._rulesCount === 0,\n        'optimizeForSpeed cannot be when rules have already been inserted',\n      )\n      this.flush()\n      this._optimizeForSpeed = bool\n      this.inject()\n    }\n\n    _proto.isOptimizeForSpeed = function isOptimizeForSpeed() {\n      return this._optimizeForSpeed\n    }\n\n    _proto.inject = function inject() {\n      var _this = this\n\n      invariant(!this._injected, 'sheet already injected')\n      this._injected = true\n\n      if (this._isBrowser && this._optimizeForSpeed) {\n        this._tags[0] = this.makeStyleTag(this._name)\n        this._optimizeForSpeed = 'insertRule' in this.getSheet()\n\n        if (!this._optimizeForSpeed) {\n          if (!isProd) {\n            console.warn(\n              'StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.',\n            )\n          }\n\n          this.flush()\n          this._injected = true\n        }\n\n        return\n      }\n\n      this._serverSheet = {\n        cssRules: [],\n        insertRule: function insertRule(rule, index) {\n          if (typeof index === 'number') {\n            _this._serverSheet.cssRules[index] = {\n              cssText: rule,\n            }\n          } else {\n            _this._serverSheet.cssRules.push({\n              cssText: rule,\n            })\n          }\n\n          return index\n        },\n        deleteRule: function deleteRule(index) {\n          _this._serverSheet.cssRules[index] = null\n        },\n      }\n    }\n\n    _proto.getSheetForTag = function getSheetForTag(tag) {\n      if (tag.sheet) {\n        return tag.sheet\n      } // this weirdness brought to you by firefox\n\n      for (var i = 0; i < document.styleSheets.length; i++) {\n        if (document.styleSheets[i].ownerNode === tag) {\n          return document.styleSheets[i]\n        }\n      }\n    }\n\n    _proto.getSheet = function getSheet() {\n      return this.getSheetForTag(this._tags[this._tags.length - 1])\n    }\n\n    _proto.insertRule = function insertRule(rule, index) {\n      invariant(isString(rule), '`insertRule` accepts only strings')\n\n      if (!this._isBrowser) {\n        if (typeof index !== 'number') {\n          index = this._serverSheet.cssRules.length\n        }\n\n        this._serverSheet.insertRule(rule, index)\n\n        return this._rulesCount++\n      }\n\n      if (this._optimizeForSpeed) {\n        var sheet = this.getSheet()\n\n        if (typeof index !== 'number') {\n          index = sheet.cssRules.length\n        } // this weirdness for perf, and chrome's weird bug\n        // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule\n\n        try {\n          sheet.insertRule(rule, index)\n        } catch (error) {\n          if (!isProd) {\n            console.warn(\n              'StyleSheet: illegal rule: \\n\\n' +\n                rule +\n                '\\n\\nSee https://stackoverflow.com/q/20007992 for more info',\n            )\n          }\n\n          return -1\n        }\n      } else {\n        var insertionPoint = this._tags[index]\n\n        this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint))\n      }\n\n      return this._rulesCount++\n    }\n\n    _proto.replaceRule = function replaceRule(index, rule) {\n      if (this._optimizeForSpeed || !this._isBrowser) {\n        var sheet = this._isBrowser ? this.getSheet() : this._serverSheet\n\n        if (!rule.trim()) {\n          rule = this._deletedRulePlaceholder\n        }\n\n        if (!sheet.cssRules[index]) {\n          // @TBD Should we throw an error?\n          return index\n        }\n\n        sheet.deleteRule(index)\n\n        try {\n          sheet.insertRule(rule, index)\n        } catch (error) {\n          if (!isProd) {\n            console.warn(\n              'StyleSheet: illegal rule: \\n\\n' +\n                rule +\n                '\\n\\nSee https://stackoverflow.com/q/20007992 for more info',\n            )\n          } // In order to preserve the indices we insert a deleteRulePlaceholder\n\n          sheet.insertRule(this._deletedRulePlaceholder, index)\n        }\n      } else {\n        var tag = this._tags[index]\n        invariant(tag, 'old rule at index `' + index + '` not found')\n        tag.textContent = rule\n      }\n\n      return index\n    }\n\n    _proto.deleteRule = function deleteRule(index) {\n      if (!this._isBrowser) {\n        this._serverSheet.deleteRule(index)\n\n        return\n      }\n\n      if (this._optimizeForSpeed) {\n        this.replaceRule(index, '')\n      } else {\n        var tag = this._tags[index]\n        invariant(tag, 'rule at index `' + index + '` not found')\n        tag.parentNode.removeChild(tag)\n        this._tags[index] = null\n      }\n    }\n\n    _proto.flush = function flush() {\n      this._injected = false\n      this._rulesCount = 0\n\n      if (this._isBrowser) {\n        this._tags.forEach(function (tag) {\n          return tag && tag.parentNode.removeChild(tag)\n        })\n\n        this._tags = []\n      } else {\n        // simpler on server\n        this._serverSheet.cssRules = []\n      }\n    }\n\n    _proto.cssRules = function cssRules() {\n      var _this2 = this\n\n      if (!this._isBrowser) {\n        return this._serverSheet.cssRules\n      }\n\n      return this._tags.reduce(function (rules, tag) {\n        if (tag) {\n          rules = rules.concat(\n            Array.prototype.map.call(\n              _this2.getSheetForTag(tag).cssRules,\n              function (rule) {\n                return rule.cssText === _this2._deletedRulePlaceholder ? null : rule\n              },\n            ),\n          )\n        } else {\n          rules.push(null)\n        }\n\n        return rules\n      }, [])\n    }\n\n    _proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) {\n      if (cssString) {\n        invariant(\n          isString(cssString),\n          'makeStyleTag acceps only strings as second parameter',\n        )\n      }\n\n      var tag = document.createElement('style')\n      if (this._nonce) tag.setAttribute('nonce', this._nonce)\n      tag.type = 'text/css'\n      tag.setAttribute('data-' + name, '')\n\n      if (cssString) {\n        tag.appendChild(document.createTextNode(cssString))\n      }\n\n      var head = document.head || document.getElementsByTagName('head')[0]\n\n      if (relativeToTag) {\n        head.insertBefore(tag, relativeToTag)\n      } else {\n        head.appendChild(tag)\n      }\n\n      return tag\n    }\n\n    _createClass(StyleSheet, [\n      {\n        key: 'length',\n        get: function get() {\n          return this._rulesCount\n        },\n      },\n    ])\n\n    return StyleSheet\n  })()\n\n  exports['default'] = StyleSheet\n\n  function invariant(condition, message) {\n    if (!condition) {\n      throw new Error('StyleSheet: ' + message + '.')\n    }\n  }\n})(stylesheet)\n\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = void 0\n\n  var _stringHash = _interopRequireDefault(stringHash)\n\n  var _stylesheet = _interopRequireDefault(stylesheet)\n\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj }\n  }\n\n  var sanitize = function sanitize(rule) {\n    return rule.replace(/\\/style/gi, '\\\\/style')\n  }\n\n  var StyleSheetRegistry = /*#__PURE__*/ (function () {\n    function StyleSheetRegistry(_temp) {\n      var _ref = _temp === void 0 ? {} : _temp,\n        _ref$styleSheet = _ref.styleSheet,\n        styleSheet = _ref$styleSheet === void 0 ? null : _ref$styleSheet,\n        _ref$optimizeForSpeed = _ref.optimizeForSpeed,\n        optimizeForSpeed =\n          _ref$optimizeForSpeed === void 0 ? false : _ref$optimizeForSpeed,\n        _ref$isBrowser = _ref.isBrowser,\n        isBrowser =\n          _ref$isBrowser === void 0 ? typeof window !== 'undefined' : _ref$isBrowser\n\n      this._sheet =\n        styleSheet ||\n        new _stylesheet['default']({\n          name: 'styled-jsx',\n          optimizeForSpeed: optimizeForSpeed,\n        })\n\n      this._sheet.inject()\n\n      if (styleSheet && typeof optimizeForSpeed === 'boolean') {\n        this._sheet.setOptimizeForSpeed(optimizeForSpeed)\n\n        this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()\n      }\n\n      this._isBrowser = isBrowser\n      this._fromServer = undefined\n      this._indices = {}\n      this._instancesCounts = {}\n      this.computeId = this.createComputeId()\n      this.computeSelector = this.createComputeSelector()\n    }\n\n    var _proto = StyleSheetRegistry.prototype\n\n    _proto.add = function add(props) {\n      var _this = this\n\n      if (undefined === this._optimizeForSpeed) {\n        this._optimizeForSpeed = Array.isArray(props.children)\n\n        this._sheet.setOptimizeForSpeed(this._optimizeForSpeed)\n\n        this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()\n      }\n\n      if (this._isBrowser && !this._fromServer) {\n        this._fromServer = this.selectFromServer()\n        this._instancesCounts = Object.keys(this._fromServer).reduce(function (\n          acc,\n          tagName,\n        ) {\n          acc[tagName] = 0\n          return acc\n        },\n        {})\n      }\n\n      var _this$getIdAndRules = this.getIdAndRules(props),\n        styleId = _this$getIdAndRules.styleId,\n        rules = _this$getIdAndRules.rules // Deduping: just increase the instances count.\n\n      if (styleId in this._instancesCounts) {\n        this._instancesCounts[styleId] += 1\n        return\n      }\n\n      var indices = rules\n        .map(function (rule) {\n          return _this._sheet.insertRule(rule)\n        }) // Filter out invalid rules\n        .filter(function (index) {\n          return index !== -1\n        })\n      this._indices[styleId] = indices\n      this._instancesCounts[styleId] = 1\n    }\n\n    _proto.remove = function remove(props) {\n      var _this2 = this\n\n      var _this$getIdAndRules2 = this.getIdAndRules(props),\n        styleId = _this$getIdAndRules2.styleId\n\n      invariant(styleId in this._instancesCounts, 'styleId: `' + styleId + '` not found')\n      this._instancesCounts[styleId] -= 1\n\n      if (this._instancesCounts[styleId] < 1) {\n        var tagFromServer = this._fromServer && this._fromServer[styleId]\n\n        if (tagFromServer) {\n          tagFromServer.parentNode.removeChild(tagFromServer)\n          delete this._fromServer[styleId]\n        } else {\n          this._indices[styleId].forEach(function (index) {\n            return _this2._sheet.deleteRule(index)\n          })\n\n          delete this._indices[styleId]\n        }\n\n        delete this._instancesCounts[styleId]\n      }\n    }\n\n    _proto.update = function update(props, nextProps) {\n      this.add(nextProps)\n      this.remove(props)\n    }\n\n    _proto.flush = function flush() {\n      this._sheet.flush()\n\n      this._sheet.inject()\n\n      this._fromServer = undefined\n      this._indices = {}\n      this._instancesCounts = {}\n      this.computeId = this.createComputeId()\n      this.computeSelector = this.createComputeSelector()\n    }\n\n    _proto.cssRules = function cssRules() {\n      var _this3 = this\n\n      var fromServer = this._fromServer\n        ? Object.keys(this._fromServer).map(function (styleId) {\n            return [styleId, _this3._fromServer[styleId]]\n          })\n        : []\n\n      var cssRules = this._sheet.cssRules()\n\n      return fromServer.concat(\n        Object.keys(this._indices)\n          .map(function (styleId) {\n            return [\n              styleId,\n              _this3._indices[styleId]\n                .map(function (index) {\n                  return cssRules[index].cssText\n                })\n                .join(_this3._optimizeForSpeed ? '' : '\\n'),\n            ]\n          }) // filter out empty rules\n          .filter(function (rule) {\n            return Boolean(rule[1])\n          }),\n      )\n    }\n    /**\n     * createComputeId\n     *\n     * Creates a function to compute and memoize a jsx id from a basedId and optionally props.\n     */\n\n    _proto.createComputeId = function createComputeId() {\n      var cache = {}\n      return function (baseId, props) {\n        if (!props) {\n          return 'jsx-' + baseId\n        }\n\n        var propsToString = String(props)\n        var key = baseId + propsToString // return `jsx-${hashString(`${baseId}-${propsToString}`)}`\n\n        if (!cache[key]) {\n          cache[key] = 'jsx-' + (0, _stringHash['default'])(baseId + '-' + propsToString)\n        }\n\n        return cache[key]\n      }\n    }\n    /**\n     * createComputeSelector\n     *\n     * Creates a function to compute and memoize dynamic selectors.\n     */\n\n    _proto.createComputeSelector = function createComputeSelector(\n      selectoPlaceholderRegexp,\n    ) {\n      if (selectoPlaceholderRegexp === void 0) {\n        selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g\n      }\n\n      var cache = {}\n      return function (id, css) {\n        // Sanitize SSR-ed CSS.\n        // Client side code doesn't need to be sanitized since we use\n        // document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod).\n        if (!this._isBrowser) {\n          css = sanitize(css)\n        }\n\n        var idcss = id + css\n\n        if (!cache[idcss]) {\n          cache[idcss] = css.replace(selectoPlaceholderRegexp, id)\n        }\n\n        return cache[idcss]\n      }\n    }\n\n    _proto.getIdAndRules = function getIdAndRules(props) {\n      var _this4 = this\n\n      var css = props.children,\n        dynamic = props.dynamic,\n        id = props.id\n\n      if (dynamic) {\n        var styleId = this.computeId(id, dynamic)\n        return {\n          styleId: styleId,\n          rules: Array.isArray(css)\n            ? css.map(function (rule) {\n                return _this4.computeSelector(styleId, rule)\n              })\n            : [this.computeSelector(styleId, css)],\n        }\n      }\n\n      return {\n        styleId: this.computeId(id),\n        rules: Array.isArray(css) ? css : [css],\n      }\n    }\n    /**\n     * selectFromServer\n     *\n     * Collects style tags from the document with id __jsx-XXX\n     */\n\n    _proto.selectFromServer = function selectFromServer() {\n      var elements = Array.prototype.slice.call(\n        document.querySelectorAll('[id^=\"__jsx-\"]'),\n      )\n      return elements.reduce(function (acc, element) {\n        var id = element.id.slice(2)\n        acc[id] = element\n        return acc\n      }, {})\n    }\n\n    return StyleSheetRegistry\n  })()\n\n  exports['default'] = StyleSheetRegistry\n\n  function invariant(condition, message) {\n    if (!condition) {\n      throw new Error('StyleSheetRegistry: ' + message + '.')\n    }\n  }\n})(stylesheetRegistry)\n\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = JSXStyle\n  exports.flush = flush\n\n  var _react = React__default['default']\n\n  var _stylesheetRegistry = _interopRequireDefault(stylesheetRegistry)\n\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj }\n  }\n\n  var styleSheetRegistry = new _stylesheetRegistry['default']()\n\n  function JSXStyle(props) {\n    if (typeof window === 'undefined') {\n      styleSheetRegistry.add(props)\n      return null\n    }\n\n    ;(0, _react.useLayoutEffect)(\n      function () {\n        styleSheetRegistry.add(props)\n        return function () {\n          styleSheetRegistry.remove(props)\n        } // props.children can be string[], will be striped since id is identical\n      },\n      [props.id, String(props.dynamic)],\n    )\n    return null\n  }\n\n  JSXStyle.dynamic = function (info) {\n    return info\n      .map(function (tagInfo) {\n        var baseId = tagInfo[0]\n        var props = tagInfo[1]\n        return styleSheetRegistry.computeId(baseId, props)\n      })\n      .join(' ')\n  }\n\n  function flush() {\n    var cssRules = styleSheetRegistry.cssRules()\n    styleSheetRegistry.flush()\n    return cssRules\n  }\n})(style$1)\n\nvar style = style$1.default || style$1\nstyle.flush = style$1.flush\n\nvar server$1 = {}\n\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = flushToReact\n  exports.flushToHTML = flushToHTML\n\n  var _react = _interopRequireDefault(React__default['default'])\n\n  var _style = style$1.default || style$1\n  _style.flush = style$1.flush\n\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj }\n  }\n\n  function flushToReact(options) {\n    if (options === void 0) {\n      options = {}\n    }\n\n    return (0, _style.flush)().map(function (args) {\n      var id = args[0]\n      var css = args[1]\n      return _react['default'].createElement('style', {\n        id: '__' + id,\n        // Avoid warnings upon render with a key\n        key: '__' + id,\n        nonce: options.nonce ? options.nonce : undefined,\n        dangerouslySetInnerHTML: {\n          __html: css,\n        },\n      })\n    })\n  }\n\n  function flushToHTML(options) {\n    if (options === void 0) {\n      options = {}\n    }\n\n    return (0, _style.flush)().reduce(function (html, args) {\n      var id = args[0]\n      var css = args[1]\n      html +=\n        '<style id=\"__' +\n        id +\n        '\"' +\n        (options.nonce ? ' nonce=\"' + options.nonce + '\"' : '') +\n        '>' +\n        css +\n        '</style>'\n      return html\n    }, '')\n  }\n})(server$1)\n\nvar server = server$1.default || server$1\nserver.flushToHTML = server$1.flushToHTML\n\nexports.server = server\nexports.style = style\n"
  },
  {
    "path": "scripts/built-in/styled-jsx.es.js",
    "content": "import React from 'react'\n\nvar style$1 = {}\n\nvar stylesheetRegistry = {}\n\nfunction hash(str) {\n  var hash = 5381,\n    i = str.length\n\n  while (i) {\n    hash = (hash * 33) ^ str.charCodeAt(--i)\n  }\n\n  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed\n   * integers. Since we want the results to be always positive, convert the\n   * signed int to an unsigned by doing an unsigned bitshift. */\n  return hash >>> 0\n}\n\nvar stringHash = hash\n\nvar stylesheet = {}\n\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = void 0\n\n  function _defineProperties(target, props) {\n    for (var i = 0; i < props.length; i++) {\n      var descriptor = props[i]\n      descriptor.enumerable = descriptor.enumerable || false\n      descriptor.configurable = true\n      if ('value' in descriptor) descriptor.writable = true\n      Object.defineProperty(target, descriptor.key, descriptor)\n    }\n  }\n\n  function _createClass(Constructor, protoProps, staticProps) {\n    if (protoProps) _defineProperties(Constructor.prototype, protoProps)\n    if (staticProps) _defineProperties(Constructor, staticProps)\n    return Constructor\n  }\n\n  /*\n  Based on Glamor's sheet\n  https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js\n  */\n  var isProd =\n    typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production'\n\n  var isString = function isString(o) {\n    return Object.prototype.toString.call(o) === '[object String]'\n  }\n\n  var StyleSheet = /*#__PURE__*/ (function () {\n    function StyleSheet(_temp) {\n      var _ref = _temp === void 0 ? {} : _temp,\n        _ref$name = _ref.name,\n        name = _ref$name === void 0 ? 'stylesheet' : _ref$name,\n        _ref$optimizeForSpeed = _ref.optimizeForSpeed,\n        optimizeForSpeed =\n          _ref$optimizeForSpeed === void 0 ? isProd : _ref$optimizeForSpeed,\n        _ref$isBrowser = _ref.isBrowser,\n        isBrowser =\n          _ref$isBrowser === void 0 ? typeof window !== 'undefined' : _ref$isBrowser\n\n      invariant(isString(name), '`name` must be a string')\n      this._name = name\n      this._deletedRulePlaceholder = '#' + name + '-deleted-rule____{}'\n      invariant(\n        typeof optimizeForSpeed === 'boolean',\n        '`optimizeForSpeed` must be a boolean',\n      )\n      this._optimizeForSpeed = optimizeForSpeed\n      this._isBrowser = isBrowser\n      this._serverSheet = undefined\n      this._tags = []\n      this._injected = false\n      this._rulesCount = 0\n      var node = this._isBrowser && document.querySelector('meta[property=\"csp-nonce\"]')\n      this._nonce = node ? node.getAttribute('content') : null\n    }\n\n    var _proto = StyleSheet.prototype\n\n    _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) {\n      invariant(typeof bool === 'boolean', '`setOptimizeForSpeed` accepts a boolean')\n      invariant(\n        this._rulesCount === 0,\n        'optimizeForSpeed cannot be when rules have already been inserted',\n      )\n      this.flush()\n      this._optimizeForSpeed = bool\n      this.inject()\n    }\n\n    _proto.isOptimizeForSpeed = function isOptimizeForSpeed() {\n      return this._optimizeForSpeed\n    }\n\n    _proto.inject = function inject() {\n      var _this = this\n\n      invariant(!this._injected, 'sheet already injected')\n      this._injected = true\n\n      if (this._isBrowser && this._optimizeForSpeed) {\n        this._tags[0] = this.makeStyleTag(this._name)\n        this._optimizeForSpeed = 'insertRule' in this.getSheet()\n\n        if (!this._optimizeForSpeed) {\n          if (!isProd) {\n            console.warn(\n              'StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.',\n            )\n          }\n\n          this.flush()\n          this._injected = true\n        }\n\n        return\n      }\n\n      this._serverSheet = {\n        cssRules: [],\n        insertRule: function insertRule(rule, index) {\n          if (typeof index === 'number') {\n            _this._serverSheet.cssRules[index] = {\n              cssText: rule,\n            }\n          } else {\n            _this._serverSheet.cssRules.push({\n              cssText: rule,\n            })\n          }\n\n          return index\n        },\n        deleteRule: function deleteRule(index) {\n          _this._serverSheet.cssRules[index] = null\n        },\n      }\n    }\n\n    _proto.getSheetForTag = function getSheetForTag(tag) {\n      if (tag.sheet) {\n        return tag.sheet\n      } // this weirdness brought to you by firefox\n\n      for (var i = 0; i < document.styleSheets.length; i++) {\n        if (document.styleSheets[i].ownerNode === tag) {\n          return document.styleSheets[i]\n        }\n      }\n    }\n\n    _proto.getSheet = function getSheet() {\n      return this.getSheetForTag(this._tags[this._tags.length - 1])\n    }\n\n    _proto.insertRule = function insertRule(rule, index) {\n      invariant(isString(rule), '`insertRule` accepts only strings')\n\n      if (!this._isBrowser) {\n        if (typeof index !== 'number') {\n          index = this._serverSheet.cssRules.length\n        }\n\n        this._serverSheet.insertRule(rule, index)\n\n        return this._rulesCount++\n      }\n\n      if (this._optimizeForSpeed) {\n        var sheet = this.getSheet()\n\n        if (typeof index !== 'number') {\n          index = sheet.cssRules.length\n        } // this weirdness for perf, and chrome's weird bug\n        // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule\n\n        try {\n          sheet.insertRule(rule, index)\n        } catch (error) {\n          if (!isProd) {\n            console.warn(\n              'StyleSheet: illegal rule: \\n\\n' +\n                rule +\n                '\\n\\nSee https://stackoverflow.com/q/20007992 for more info',\n            )\n          }\n\n          return -1\n        }\n      } else {\n        var insertionPoint = this._tags[index]\n\n        this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint))\n      }\n\n      return this._rulesCount++\n    }\n\n    _proto.replaceRule = function replaceRule(index, rule) {\n      if (this._optimizeForSpeed || !this._isBrowser) {\n        var sheet = this._isBrowser ? this.getSheet() : this._serverSheet\n\n        if (!rule.trim()) {\n          rule = this._deletedRulePlaceholder\n        }\n\n        if (!sheet.cssRules[index]) {\n          // @TBD Should we throw an error?\n          return index\n        }\n\n        sheet.deleteRule(index)\n\n        try {\n          sheet.insertRule(rule, index)\n        } catch (error) {\n          if (!isProd) {\n            console.warn(\n              'StyleSheet: illegal rule: \\n\\n' +\n                rule +\n                '\\n\\nSee https://stackoverflow.com/q/20007992 for more info',\n            )\n          } // In order to preserve the indices we insert a deleteRulePlaceholder\n\n          sheet.insertRule(this._deletedRulePlaceholder, index)\n        }\n      } else {\n        var tag = this._tags[index]\n        invariant(tag, 'old rule at index `' + index + '` not found')\n        tag.textContent = rule\n      }\n\n      return index\n    }\n\n    _proto.deleteRule = function deleteRule(index) {\n      if (!this._isBrowser) {\n        this._serverSheet.deleteRule(index)\n\n        return\n      }\n\n      if (this._optimizeForSpeed) {\n        this.replaceRule(index, '')\n      } else {\n        var tag = this._tags[index]\n        invariant(tag, 'rule at index `' + index + '` not found')\n        tag.parentNode.removeChild(tag)\n        this._tags[index] = null\n      }\n    }\n\n    _proto.flush = function flush() {\n      this._injected = false\n      this._rulesCount = 0\n\n      if (this._isBrowser) {\n        this._tags.forEach(function (tag) {\n          return tag && tag.parentNode.removeChild(tag)\n        })\n\n        this._tags = []\n      } else {\n        // simpler on server\n        this._serverSheet.cssRules = []\n      }\n    }\n\n    _proto.cssRules = function cssRules() {\n      var _this2 = this\n\n      if (!this._isBrowser) {\n        return this._serverSheet.cssRules\n      }\n\n      return this._tags.reduce(function (rules, tag) {\n        if (tag) {\n          rules = rules.concat(\n            Array.prototype.map.call(\n              _this2.getSheetForTag(tag).cssRules,\n              function (rule) {\n                return rule.cssText === _this2._deletedRulePlaceholder ? null : rule\n              },\n            ),\n          )\n        } else {\n          rules.push(null)\n        }\n\n        return rules\n      }, [])\n    }\n\n    _proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) {\n      if (cssString) {\n        invariant(\n          isString(cssString),\n          'makeStyleTag acceps only strings as second parameter',\n        )\n      }\n\n      var tag = document.createElement('style')\n      if (this._nonce) tag.setAttribute('nonce', this._nonce)\n      tag.type = 'text/css'\n      tag.setAttribute('data-' + name, '')\n\n      if (cssString) {\n        tag.appendChild(document.createTextNode(cssString))\n      }\n\n      var head = document.head || document.getElementsByTagName('head')[0]\n\n      if (relativeToTag) {\n        head.insertBefore(tag, relativeToTag)\n      } else {\n        head.appendChild(tag)\n      }\n\n      return tag\n    }\n\n    _createClass(StyleSheet, [\n      {\n        key: 'length',\n        get: function get() {\n          return this._rulesCount\n        },\n      },\n    ])\n\n    return StyleSheet\n  })()\n\n  exports['default'] = StyleSheet\n\n  function invariant(condition, message) {\n    if (!condition) {\n      throw new Error('StyleSheet: ' + message + '.')\n    }\n  }\n})(stylesheet)\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = void 0\n\n  var _stringHash = _interopRequireDefault(stringHash)\n\n  var _stylesheet = _interopRequireDefault(stylesheet)\n\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj }\n  }\n\n  var sanitize = function sanitize(rule) {\n    return rule.replace(/\\/style/gi, '\\\\/style')\n  }\n\n  var StyleSheetRegistry = /*#__PURE__*/ (function () {\n    function StyleSheetRegistry(_temp) {\n      var _ref = _temp === void 0 ? {} : _temp,\n        _ref$styleSheet = _ref.styleSheet,\n        styleSheet = _ref$styleSheet === void 0 ? null : _ref$styleSheet,\n        _ref$optimizeForSpeed = _ref.optimizeForSpeed,\n        optimizeForSpeed =\n          _ref$optimizeForSpeed === void 0 ? false : _ref$optimizeForSpeed,\n        _ref$isBrowser = _ref.isBrowser,\n        isBrowser =\n          _ref$isBrowser === void 0 ? typeof window !== 'undefined' : _ref$isBrowser\n\n      this._sheet =\n        styleSheet ||\n        new _stylesheet['default']({\n          name: 'styled-jsx',\n          optimizeForSpeed: optimizeForSpeed,\n        })\n\n      this._sheet.inject()\n\n      if (styleSheet && typeof optimizeForSpeed === 'boolean') {\n        this._sheet.setOptimizeForSpeed(optimizeForSpeed)\n\n        this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()\n      }\n\n      this._isBrowser = isBrowser\n      this._fromServer = undefined\n      this._indices = {}\n      this._instancesCounts = {}\n      this.computeId = this.createComputeId()\n      this.computeSelector = this.createComputeSelector()\n    }\n\n    var _proto = StyleSheetRegistry.prototype\n\n    _proto.add = function add(props) {\n      var _this = this\n\n      if (undefined === this._optimizeForSpeed) {\n        this._optimizeForSpeed = Array.isArray(props.children)\n\n        this._sheet.setOptimizeForSpeed(this._optimizeForSpeed)\n\n        this._optimizeForSpeed = this._sheet.isOptimizeForSpeed()\n      }\n\n      if (this._isBrowser && !this._fromServer) {\n        this._fromServer = this.selectFromServer()\n        this._instancesCounts = Object.keys(this._fromServer).reduce(function (\n          acc,\n          tagName,\n        ) {\n          acc[tagName] = 0\n          return acc\n        },\n        {})\n      }\n\n      var _this$getIdAndRules = this.getIdAndRules(props),\n        styleId = _this$getIdAndRules.styleId,\n        rules = _this$getIdAndRules.rules // Deduping: just increase the instances count.\n\n      if (styleId in this._instancesCounts) {\n        this._instancesCounts[styleId] += 1\n        return\n      }\n\n      var indices = rules\n        .map(function (rule) {\n          return _this._sheet.insertRule(rule)\n        }) // Filter out invalid rules\n        .filter(function (index) {\n          return index !== -1\n        })\n      this._indices[styleId] = indices\n      this._instancesCounts[styleId] = 1\n    }\n\n    _proto.remove = function remove(props) {\n      var _this2 = this\n\n      var _this$getIdAndRules2 = this.getIdAndRules(props),\n        styleId = _this$getIdAndRules2.styleId\n\n      invariant(styleId in this._instancesCounts, 'styleId: `' + styleId + '` not found')\n      this._instancesCounts[styleId] -= 1\n\n      if (this._instancesCounts[styleId] < 1) {\n        var tagFromServer = this._fromServer && this._fromServer[styleId]\n\n        if (tagFromServer) {\n          tagFromServer.parentNode.removeChild(tagFromServer)\n          delete this._fromServer[styleId]\n        } else {\n          this._indices[styleId].forEach(function (index) {\n            return _this2._sheet.deleteRule(index)\n          })\n\n          delete this._indices[styleId]\n        }\n\n        delete this._instancesCounts[styleId]\n      }\n    }\n\n    _proto.update = function update(props, nextProps) {\n      this.add(nextProps)\n      this.remove(props)\n    }\n\n    _proto.flush = function flush() {\n      this._sheet.flush()\n\n      this._sheet.inject()\n\n      this._fromServer = undefined\n      this._indices = {}\n      this._instancesCounts = {}\n      this.computeId = this.createComputeId()\n      this.computeSelector = this.createComputeSelector()\n    }\n\n    _proto.cssRules = function cssRules() {\n      var _this3 = this\n\n      var fromServer = this._fromServer\n        ? Object.keys(this._fromServer).map(function (styleId) {\n            return [styleId, _this3._fromServer[styleId]]\n          })\n        : []\n\n      var cssRules = this._sheet.cssRules()\n\n      return fromServer.concat(\n        Object.keys(this._indices)\n          .map(function (styleId) {\n            return [\n              styleId,\n              _this3._indices[styleId]\n                .map(function (index) {\n                  return cssRules[index].cssText\n                })\n                .join(_this3._optimizeForSpeed ? '' : '\\n'),\n            ]\n          }) // filter out empty rules\n          .filter(function (rule) {\n            return Boolean(rule[1])\n          }),\n      )\n    }\n    /**\n     * createComputeId\n     *\n     * Creates a function to compute and memoize a jsx id from a basedId and optionally props.\n     */\n\n    _proto.createComputeId = function createComputeId() {\n      var cache = {}\n      return function (baseId, props) {\n        if (!props) {\n          return 'jsx-' + baseId\n        }\n\n        var propsToString = String(props)\n        var key = baseId + propsToString // return `jsx-${hashString(`${baseId}-${propsToString}`)}`\n\n        if (!cache[key]) {\n          cache[key] = 'jsx-' + (0, _stringHash['default'])(baseId + '-' + propsToString)\n        }\n\n        return cache[key]\n      }\n    }\n    /**\n     * createComputeSelector\n     *\n     * Creates a function to compute and memoize dynamic selectors.\n     */\n\n    _proto.createComputeSelector = function createComputeSelector(\n      selectoPlaceholderRegexp,\n    ) {\n      if (selectoPlaceholderRegexp === void 0) {\n        selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g\n      }\n\n      var cache = {}\n      return function (id, css) {\n        // Sanitize SSR-ed CSS.\n        // Client side code doesn't need to be sanitized since we use\n        // document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod).\n        if (!this._isBrowser) {\n          css = sanitize(css)\n        }\n\n        var idcss = id + css\n\n        if (!cache[idcss]) {\n          cache[idcss] = css.replace(selectoPlaceholderRegexp, id)\n        }\n\n        return cache[idcss]\n      }\n    }\n\n    _proto.getIdAndRules = function getIdAndRules(props) {\n      var _this4 = this\n\n      var css = props.children,\n        dynamic = props.dynamic,\n        id = props.id\n\n      if (dynamic) {\n        var styleId = this.computeId(id, dynamic)\n        return {\n          styleId: styleId,\n          rules: Array.isArray(css)\n            ? css.map(function (rule) {\n                return _this4.computeSelector(styleId, rule)\n              })\n            : [this.computeSelector(styleId, css)],\n        }\n      }\n\n      return {\n        styleId: this.computeId(id),\n        rules: Array.isArray(css) ? css : [css],\n      }\n    }\n    /**\n     * selectFromServer\n     *\n     * Collects style tags from the document with id __jsx-XXX\n     */\n\n    _proto.selectFromServer = function selectFromServer() {\n      var elements = Array.prototype.slice.call(\n        document.querySelectorAll('[id^=\"__jsx-\"]'),\n      )\n      return elements.reduce(function (acc, element) {\n        var id = element.id.slice(2)\n        acc[id] = element\n        return acc\n      }, {})\n    }\n\n    return StyleSheetRegistry\n  })()\n\n  exports['default'] = StyleSheetRegistry\n\n  function invariant(condition, message) {\n    if (!condition) {\n      throw new Error('StyleSheetRegistry: ' + message + '.')\n    }\n  }\n})(stylesheetRegistry)\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = JSXStyle\n  exports.flush = flush\n\n  var _react = React\n\n  var _stylesheetRegistry = _interopRequireDefault(stylesheetRegistry)\n\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj }\n  }\n\n  var styleSheetRegistry = new _stylesheetRegistry['default']()\n\n  function JSXStyle(props) {\n    if (typeof window === 'undefined') {\n      styleSheetRegistry.add(props)\n      return null\n    }\n\n    ;(0, _react.useLayoutEffect)(\n      function () {\n        styleSheetRegistry.add(props)\n        return function () {\n          styleSheetRegistry.remove(props)\n        } // props.children can be string[], will be striped since id is identical\n      },\n      [props.id, String(props.dynamic)],\n    )\n    return null\n  }\n\n  JSXStyle.dynamic = function (info) {\n    return info\n      .map(function (tagInfo) {\n        var baseId = tagInfo[0]\n        var props = tagInfo[1]\n        return styleSheetRegistry.computeId(baseId, props)\n      })\n      .join(' ')\n  }\n\n  function flush() {\n    var cssRules = styleSheetRegistry.cssRules()\n    styleSheetRegistry.flush()\n    return cssRules\n  }\n})(style$1)\n\nvar style = style$1.default || style$1\nstyle.flush = style$1.flush\n\nvar server = {}\n\n;(function (exports) {\n  exports.__esModule = true\n  exports['default'] = flushToReact\n  exports.flushToHTML = flushToHTML\n\n  var _react = _interopRequireDefault(React)\n\n  var _style = style$1.default || style$1\n  _style.flush = style$1.flush\n\n  function _interopRequireDefault(obj) {\n    return obj && obj.__esModule ? obj : { default: obj }\n  }\n\n  function flushToReact(options) {\n    if (options === void 0) {\n      options = {}\n    }\n\n    return (0, _style.flush)().map(function (args) {\n      var id = args[0]\n      var css = args[1]\n      return _react['default'].createElement('style', {\n        id: '__' + id,\n        // Avoid warnings upon render with a key\n        key: '__' + id,\n        nonce: options.nonce ? options.nonce : undefined,\n        dangerouslySetInnerHTML: {\n          __html: css,\n        },\n      })\n    })\n  }\n\n  function flushToHTML(options) {\n    if (options === void 0) {\n      options = {}\n    }\n\n    return (0, _style.flush)().reduce(function (html, args) {\n      var id = args[0]\n      var css = args[1]\n      html +=\n        '<style id=\"__' +\n        id +\n        '\"' +\n        (options.nonce ? ' nonce=\"' + options.nonce + '\"' : '') +\n        '>' +\n        css +\n        '</style>'\n      return html\n    }, '')\n  }\n})(server)\nvar _server = server.default || server\n_server.flushToHTML = server.flushToHTML\n\nexport { style, _server as server }\nexport default style\n"
  },
  {
    "path": "scripts/collect-meta.js",
    "content": "const fs = require('fs-extra')\nconst path = require('path')\nconst extractMetadata = require('extract-mdx-metadata')\nconst metaLocales = require('./locales')\nconst pagePrefix = path.join(__dirname, '../pages')\nconst getTargetPath = locale => {\n  return path.join(__dirname, '../lib/data/', `metadata-${locale}.json`)\n}\n\nconst weights = {\n  guide: 1,\n  docs: 2,\n  'getting-started': 3,\n  components: 5,\n  customization: 10,\n}\nconst groupWeights = {\n  快速上手: 1,\n  起步: 2,\n  定制化: 5,\n  general: 1,\n  通用: 1,\n  layout: 2,\n  布局: 2,\n  surfaces: 3,\n  表面: 3,\n  'data entry': 4,\n  数据录入: 4,\n  'data display': 5,\n  数据展示: 5,\n  feedback: 6,\n  反馈: 6,\n  navigation: 7,\n  导航: 7,\n  others: 8,\n  其他: 8,\n  utils: 10,\n  工具包: 10,\n}\n\nconst getMetadata = async (files, parentPath) => {\n  return Promise.all(\n    files\n      .filter(name => name.endsWith('.mdx') || !name.includes('.'))\n      .map(async file => {\n        const filePath = path.join(parentPath, file)\n        const isDirectory = fs.statSync(filePath).isDirectory()\n        if (isDirectory) {\n          const children = await fs.readdir(filePath)\n          const childrenMetadata = await getMetadata(children, filePath)\n          const sorted = childrenMetadata.sort((a, b) => a.index - b.index)\n\n          // grouping\n          const childrenHasGroup = sorted.find(item => item.group)\n          if (childrenHasGroup) {\n            const groups = [...new Set(sorted.map(item => item.group || 'others'))]\n            const groupChildren = groups\n              .map(groupName => ({\n                name: groupName,\n                children: sorted.filter(item => (item.group || 'others') === groupName),\n              }))\n              .sort((a, b) => {\n                const pre = a.name.toLowerCase()\n                const current = b.name.toLowerCase()\n                return groupWeights[pre] - groupWeights[current]\n              })\n            return {\n              name: file,\n              children: groupChildren,\n            }\n          }\n\n          return { name: file, children: sorted }\n        }\n        const content = await fs.readFile(filePath, 'utf-8')\n        const meta = await extractMetadata(content)\n        const url = filePath.replace(pagePrefix, '').replace('.mdx', '')\n        return {\n          name: meta.title || file,\n          url,\n          index: meta.index || 100,\n          group: meta.group || null,\n        }\n      }),\n  )\n}\n\nconst deepTranslate = (metadata, locales) => {\n  if (!metadata || !Array.isArray(metadata)) return metadata\n  return metadata.map(data => {\n    if (typeof data !== 'object') return data\n    if (data.children) {\n      data.children = deepTranslate(data.children, locales)\n    }\n    const localeName = locales[data.name]\n    if (!localeName) return data\n    return {\n      ...data,\n      localeName,\n    }\n  })\n}\n\n;(async () => {\n  try {\n    const locales = (await fs.readdir(pagePrefix)).filter(name => {\n      const fullPath = path.join(pagePrefix, name)\n      if (name === 'docs') return false\n      return fs.statSync(fullPath).isDirectory()\n    })\n\n    const sortdMetaData = await Promise.all(\n      locales.map(async name => {\n        const currentLocale = metaLocales[name] || {}\n        const dir = path.join(pagePrefix, name)\n        const childDirs = await fs.readdir(dir)\n        const data = await getMetadata(childDirs, dir)\n        const sorted = data.sort((a, b) => weights[a.name] - weights[b.name])\n        const translatedData = deepTranslate(sorted, currentLocale)\n\n        return {\n          name,\n          content: translatedData,\n        }\n      }),\n    )\n\n    await Promise.all(\n      sortdMetaData.map(async data => {\n        const targetPath = getTargetPath(data.name)\n        await fs.ensureFile(targetPath)\n        await fs.writeJson(targetPath, data.content)\n      }),\n    )\n  } catch (e) {\n    console.log(e)\n    process.exit(1)\n  }\n})()\n"
  },
  {
    "path": "scripts/locales.js",
    "content": "module.exports = {\n  'zh-cn': {\n    'getting-started': '快速开始',\n    customization: '定制化',\n    components: '所有组件',\n    guide: '上手指南',\n    docs: '文档',\n  },\n  'en-us': {},\n}\n"
  },
  {
    "path": "scripts/move-built-in.js",
    "content": "const { resolve, join } = require('path')\nconst fs = require('fs-extra')\nconst builtInPath = resolve(__dirname, 'built-in')\nconst esmFolderPath = resolve(__dirname, '../esm')\nconst cjsFolderPath = resolve(__dirname, '../dist')\nconst builtInFiles = {\n  esm: ['styled-jsx.es.js', 'styled-jsx-server.es.js'],\n  cjs: ['styled-jsx.cjs.js'],\n}\n\n;(async () => {\n  await Promise.all(\n    builtInFiles.esm.map(async name => {\n      const filePath = join(builtInPath, name)\n      const target = join(esmFolderPath, name)\n      await fs.copy(filePath, target, { overwrite: true })\n    }),\n  )\n  console.log('[esm]> Export of styled-jsx has been successfully replaced.')\n\n  await Promise.all(\n    builtInFiles.cjs.map(async name => {\n      const filePath = join(builtInPath, name)\n      const target = join(cjsFolderPath, name)\n      await fs.copy(filePath, target, { overwrite: true })\n    }),\n  )\n  console.log('[cjs]> Export of styled-jsx has been successfully replaced.\\n')\n})().catch(err => {\n  console.log(err)\n  process.exit(1)\n})\n"
  },
  {
    "path": "scripts/rollup.config.js",
    "content": "import commonjs from '@rollup/plugin-commonjs'\nimport nodeResolve from '@rollup/plugin-node-resolve'\nimport localResolve from 'rollup-plugin-local-resolve'\nimport babel from 'rollup-plugin-babel'\nimport fs from 'fs-extra'\nimport path from 'path'\n\nconst root = path.join(__dirname, '../')\nconst componentsPath = path.join(root, 'components')\nconst distPath = path.join(root, 'dist')\nconst esmPath = path.join(root, 'esm')\n\nconst extensions = ['.js', '.jsx', '.ts', '.tsx']\n\nconst plugins = [\n  babel({\n    exclude: 'node_modules/**',\n    extensions,\n    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],\n    plugins: ['styled-jsx/babel'],\n    babelrc: false,\n    sourcemap: false,\n  }),\n  localResolve(),\n  nodeResolve({\n    browser: true,\n    extensions,\n  }),\n  commonjs(),\n]\n\nconst globals = {\n  react: 'React',\n  'react-dom': 'ReactDOM',\n}\n\nconst external = id => /^react|react-dom|next\\/link/.test(id)\n\nconst cjsOutput = {\n  format: 'cjs',\n  exports: 'named',\n  entryFileNames: '[name]/index.js',\n  dir: distPath,\n  manualChunks: id => {\n    if (id.includes('node_modules/styled-jsx')) {\n      return 'styled-jsx.cjs'\n    }\n  },\n  chunkFileNames: '[name].js',\n  globals,\n  sourcemap: false,\n}\n\nconst esmOutput = {\n  format: 'es',\n  entryFileNames: '[name]/index.js',\n  dir: esmPath,\n  manualChunks: id => {\n    if (id.includes('node_modules/styled-jsx/server')) {\n      return 'styled-jsx-server.es'\n    }\n    if (id.includes('node_modules/styled-jsx')) {\n      return 'styled-jsx.es'\n    }\n  },\n  chunkFileNames: '[name].js',\n  globals,\n}\n\nexport default (async () => {\n  await fs.remove(distPath)\n  await fs.remove(esmPath)\n  const files = await fs.readdir(componentsPath)\n\n  const components = await Promise.all(\n    files.map(async name => {\n      const unitPath = path.join(componentsPath, name)\n      const entry = path.join(unitPath, 'index.ts')\n\n      const stat = await fs.stat(unitPath)\n      if (!stat.isDirectory()) return null\n\n      const hasFile = await fs.pathExists(entry)\n      if (!hasFile) return null\n\n      return { name, url: entry }\n    }),\n  )\n  console.log(\n    `\\n${Object.keys(components).length} Components in total have been collected.`,\n  )\n\n  return [\n    // Bundle each component separately\n    ...components\n      .filter(r => !!r)\n      .map(({ name, url }) => ({\n        input: { [name]: url },\n        // output: [esmOutput, cjsOutput],\n        output: [cjsOutput],\n        external,\n        plugins,\n      })),\n    // Bundle for packages containing all components.\n    {\n      input: { index: path.join(componentsPath, 'index.ts') },\n      output: [\n        // {\n        //   ...esmOutput,\n        //\n        //   entryFileNames: 'index.js',\n        // },\n        {\n          ...cjsOutput,\n          entryFileNames: 'index.js',\n        },\n      ],\n      external,\n      plugins,\n    },\n  ]\n})()\n"
  },
  {
    "path": "scripts/seeds/codesandbox.json",
    "content": "[{\n  \"name\": \"Getting Started\",\n  \"url\": \"https://codesandbox.io/s/geist-ui-n21e9\"\n}, {\n  \"name\": \"With TypeScript\",\n  \"url\": \"https://codesandbox.io/s/geist-ui-typescript-65td1\"\n}]\n"
  },
  {
    "path": "scripts/seeds/links.json",
    "content": "[\n  {\n    \"name\": \"Discussions\",\n    \"url\": \"https://github.com/geist-org/geist-ui/discussions\"\n  },\n  {\n    \"name\": \"Example projects\",\n    \"url\": \"https://github.com/geist-org/geist-ui/tree/master/examples\"\n  },\n  {\n    \"name\": \"Create issue\",\n    \"url\": \"https://github.com/geist-org/geist-ui/issues/new/choose\"\n  },\n  {\n    \"name\": \"Release Note\",\n    \"url\": \"https://github.com/geist-org/geist-ui/releases\"\n  },\n  {\n    \"name\": \"Join Slack\",\n    \"url\": \"https://github.com/geist-org/geist-ui/discussions/572\"\n  },\n  {\n    \"name\": \"License\",\n    \"url\": \"https://github.com/geist-org/geist-ui/blob/master/LICENSE\"\n  },\n  {\n    \"name\": \"Canary Documentation\",\n    \"url\": \"https://rc.geist-ui.dev/\"\n  },\n  {\n    \"name\": \"Canary Releases\",\n    \"url\": \"https://github.com/geist-org/geist-ui/releases?q=canary&expanded=true\"\n  }\n]\n"
  },
  {
    "path": "scripts/seeds/presets.js",
    "content": "const codesandbox = require('./codesandbox.json')\nconst links = require('./links.json')\n\nmodule.exports = codesandbox\n  .map(item => ({\n    ...item,\n    group: 'Codesandbox',\n  }))\n  .concat(\n    links.map(item => ({\n      ...item,\n      group: 'External',\n    })),\n  )\n"
  },
  {
    "path": "scripts/seeds/update.js",
    "content": "const path = require('path')\nconst fs = require('fs-extra')\nconst extractMetadata = require('extract-mdx-metadata')\nconst pagePrefix = path.join(__dirname, '../../pages')\nconst presets = require('./presets')\n\nconst flattenArray = contents => {\n  if (!Array.isArray(contents)) return contents\n  return contents.reduce((pre, current) => {\n    return pre.concat(Array.isArray(current) ? flattenArray(current) : current)\n  }, [])\n}\n\nconst getMetadata = async (files, parentPath) => {\n  const contents = await Promise.all(\n    files\n      .filter(name => name.endsWith('.mdx') || !name.includes('.'))\n      .map(async file => {\n        const filePath = path.join(parentPath, file)\n        const isDirectory = fs.statSync(filePath).isDirectory()\n        if (!isDirectory) {\n          const content = await fs.readFile(filePath, 'utf-8')\n          const meta = await extractMetadata(content)\n          const url = filePath.replace(pagePrefix, '').replace('.mdx', '')\n          return {\n            name: meta.title || file,\n            url,\n            group: meta.group || null,\n          }\n        }\n\n        const children = await fs.readdir(filePath)\n        return await getMetadata(children, filePath)\n      }),\n  )\n  return flattenArray(contents)\n}\n\nconst getLocaleData = async locale => {\n  const dir = path.join(pagePrefix, locale)\n  const childDirs = await fs.readdir(dir)\n  const data = await getMetadata(childDirs, dir)\n  return data.concat(presets)\n}\n\nconst saveData = async (filename, data) => {\n  const seedsPath = path.join(__dirname, '../../lib/data', filename)\n  const hasSeeds = await fs.pathExists(seedsPath)\n  if (hasSeeds) {\n    await fs.remove(seedsPath)\n  }\n  await fs.writeJson(seedsPath, data)\n  console.log(`> Seeds updated in ${filename}, count: ${data.length}`)\n}\n\n;(async () => {\n  const enData = await getLocaleData('en-us')\n  await saveData('seeds-en-us.json', enData)\n\n  const zhData = await getLocaleData('zh-cn')\n  await saveData('seeds-zh-cn.json', zhData)\n})()\n"
  },
  {
    "path": "scripts/side-effects.js",
    "content": "const path = require('path')\nconst fs = require('fs-extra')\n\n;(async () => {\n  const pkgPath = path.join(__dirname, '../package.json')\n  const json = await fs.readJson(pkgPath)\n  json.sideEffects = false\n  await fs.writeJson(pkgPath, json, { spaces: 2 })\n})()\n"
  },
  {
    "path": "scripts/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \"../\",\n    \"outDir\": \"../dist\",\n    \"paths\": {\n      \"*\": [\"*\"],\n      \"geist-ui\": [\"components/index.tsx\"],\n      \"components/*\": [\n        \"components/*\"\n      ]\n    },\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true,\n    \"strictNullChecks\": true,\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"experimentalDecorators\": true,\n    \"jsx\": \"preserve\",\n    \"noUnusedParameters\": true,\n    \"noUnusedLocals\": true,\n    \"noImplicitAny\": true,\n    \"target\": \"es6\",\n    \"lib\": [\n      \"dom\",\n      \"es2017\"\n    ],\n    \"skipLibCheck\": true,\n    \"allowJs\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"esnext\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"plugins\": [\n      {\n        \"transform\": \"typescript-transform-paths\",\n        \"afterDeclarations\": true,\n        \"exclude\": [ \"**/node_modules/**\" ]\n      }\n    ]\n  },\n  \"files\": [\n    \"../components/index.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"lib\",\n    \"es\"\n  ]\n}\n"
  },
  {
    "path": "scripts/tsconfig.test.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \"../\",\n    \"outDir\": \"../dist\",\n    \"declaration\": true,\n    \"emitDeclarationOnly\": true,\n    \"strictNullChecks\": true,\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"experimentalDecorators\": true,\n    \"jsx\": \"react\",\n    \"noUnusedParameters\": true,\n    \"noUnusedLocals\": true,\n    \"noImplicitAny\": true,\n    \"target\": \"es6\",\n    \"lib\": [\n      \"dom\",\n      \"es2017\"\n    ],\n    \"skipLibCheck\": true,\n    \"allowJs\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"esnext\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true\n  },\n  \"files\": [\n    \"../components/index.ts\"\n  ],\n  \"exclude\": [\n    \"node_modules\",\n    \"lib\",\n    \"es\"\n  ]\n}\n"
  },
  {
    "path": "scripts/webpack.config.js",
    "content": "const fs = require('fs-extra')\nconst path = require('path')\nconst componentsPath = path.join(__dirname, '../components')\n\nmodule.exports = async () => {\n  const files = await fs.readdir(componentsPath)\n\n  const components = await Promise.all(\n    files.map(async name => {\n      const comPath = path.join(componentsPath, name)\n      const entry = path.join(comPath, 'index.ts')\n\n      const stat = await fs.stat(comPath)\n      if (!stat.isDirectory()) return null\n\n      const hasFile = await fs.pathExists(entry)\n      if (!hasFile) return null\n\n      return { name, url: entry }\n    }),\n  )\n\n  const componentsEntries = components\n    .filter(r => r)\n    .reduce((pre, current) => {\n      return Object.assign({}, pre, { [current.name]: current.url })\n    }, {})\n\n  console.log(\n    `\\n${Object.keys(componentsEntries).length} Components in total have been collected.`,\n  )\n  console.log('Bundle now...')\n\n  const configs = {\n    mode: 'none',\n\n    entry: componentsEntries,\n\n    output: {\n      filename: '[name].js',\n      path: path.resolve(__dirname, '../dist'),\n      libraryTarget: 'commonjs',\n    },\n\n    resolve: {\n      extensions: ['.ts', '.tsx', '.js'],\n      alias: {\n        components: componentsPath,\n      },\n    },\n\n    externals: [\n      {\n        react: {\n          root: 'React',\n          commonjs2: 'react',\n          commonjs: 'react',\n          amd: 'react',\n        },\n        'react-dom': {\n          root: 'ReactDOM',\n          commonjs2: 'react-dom',\n          commonjs: 'react-dom',\n          amd: 'react-dom',\n        },\n        // '/styled-jsx/': {\n        //   root: '_JSXStyle',\n        //   commonjs2: 'styled-jsx',\n        //   commonjs: 'styled-jsx',\n        //   amd: 'styled-jsx',\n        // },\n      },\n      function (context, request, done) {\n        if (/^styled-jsx/.test(request)) {\n          return done(null, 'commonjs ' + request)\n        }\n        done()\n      },\n    ],\n\n    module: {\n      rules: [\n        {\n          test: /\\.tsx?$/,\n          exclude: /(node_modules)/,\n          loader: 'babel-loader',\n          options: {\n            presets: ['@babel/env', '@babel/react', '@babel/typescript'],\n            plugins: ['styled-jsx/babel'],\n          },\n        },\n      ],\n    },\n  }\n\n  return [\n    configs,\n    {\n      ...configs,\n\n      entry: {\n        index: path.join(componentsPath, 'index.ts'),\n      },\n    },\n    {\n      ...configs,\n\n      mode: 'production',\n\n      entry: {\n        'index.min': path.join(componentsPath, 'index.ts'),\n      },\n\n      output: {\n        filename: '[name].js',\n        path: path.resolve(__dirname, '../dist'),\n        library: 'GeistUI',\n        libraryTarget: 'umd',\n        globalObject: 'this',\n      },\n    },\n  ]\n}\n"
  },
  {
    "path": "tests/.babelrc.js",
    "content": "module.exports = {\n  presets: ['@babel/env', '@babel/react', '@babel/typescript'],\n  plugins: ['styled-jsx/babel-test', '@babel/plugin-transform-runtime'],\n}\n"
  },
  {
    "path": "tests/__mocks__/styled-jsx/css.js",
    "content": "module.exports = {\n  resolve: () => ({\n    className: 'mock',\n    style: null,\n  }),\n  css: {\n    resolve: () => ({\n      className: 'mock',\n      style: null,\n    }),\n  },\n}\n"
  },
  {
    "path": "tests/setup.ts",
    "content": "import '@testing-library/jest-dom/extend-expect'\nimport enzyme from 'enzyme'\n/**\n * The official repository does not currently support React 17\n * https://github.com/enzymejs/enzyme/issues/2429\n */\nimport Adapter from '@wojtekmaj/enzyme-adapter-react-17'\n\nenzyme.configure({ adapter: new Adapter() })\n"
  },
  {
    "path": "tests/utils.ts",
    "content": "import { act } from 'react-dom/test-utils'\nimport { ReactWrapper } from 'enzyme'\n\nexport const sleep = (time: number) => {\n  return new Promise(resolve => setTimeout(resolve, time))\n}\n\nexport const updateWrapper = async (wrapper: ReactWrapper, time: number = 0) => {\n  await act(async () => {\n    await sleep(time)\n    wrapper.update()\n  })\n}\n\nexport const mockNativeEvent = (fn: Function = () => {}) => ({\n  nativeEvent: { stopImmediatePropagation: fn },\n})\n\nexport const nativeEvent = mockNativeEvent()\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"geist-ui\": [\n        \"components/index.tsx\"\n      ]\n    },\n    \"strictNullChecks\": true,\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"experimentalDecorators\": true,\n    \"jsx\": \"preserve\",\n    \"noUnusedParameters\": true,\n    \"noUnusedLocals\": true,\n    \"noImplicitAny\": true,\n    \"target\": \"es6\",\n    \"lib\": [\n      \"dom\",\n      \"es2017\"\n    ],\n    \"skipLibCheck\": true,\n    \"allowJs\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noEmit\": true,\n    \"module\": \"esnext\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"typeRoots\": [\n      \"node_modules/@types\",\n      \"./typings\"\n    ],\n    \"incremental\": true\n  },\n  \"exclude\": [\n    \"node_modules\",\n    \"es\",\n    \"examples\",\n    \"dist\"\n  ],\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \"lib/**/*.tsx\",\n    \"components/**/*.tsx\"\n  ]\n}\n"
  },
  {
    "path": "typings/mdx.d.ts",
    "content": "declare module '*.mdx' {\n  let MDXComponent: (props: any) => JSX.Element\n  export default MDXComponent\n}\n\ndeclare module \"@mdx-js/react\" {\n  import { ComponentType, StyleHTMLAttributes } from \"react\"\n  \n  type MDXProps = {\n    children: React.ReactNode\n    components: { [key:? string]: React.ReactNode,  }\n  }\n  export class MDXProvider extends React.Component<MDXProps> {}\n}\n"
  },
  {
    "path": "typings/meta.d.ts",
    "content": "import React from 'react'\n\ndeclare module 'react' {\n  interface MetaHTMLAttributes<T> extends React.MetaHTMLAttributes<T> {\n    itemprop?: string\n  }\n}\n"
  },
  {
    "path": "typings/styled.d.ts",
    "content": "// Definitions by: @types/styled-jsx <https://www.npmjs.com/package/@types/styled-jsx>\n\nimport 'react'\n\ndeclare module 'react' {\n  interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {\n    jsx?: boolean\n    global?: boolean\n  }\n}\n"
  }
]